An overview of display: none, inline, block, inline-block & table with nods to visibility: hidden and display: flex. Talk given at Shutterstock on September 17th, 2013. Github repository & notes: https://goo.gl/O2gpzv Twitter: @sblaurock

1. ON DISPLAY:
A PRACTICAL OVERVIEW OF THE CSS DISPLAY PROPERTY
Apresentationby /SteveBlaurock @sblaurock

2. WHY DO WE USE THE DISPLAY PROPERTY?
1. To show and hide sets of elements.
2. To controlthe wayelements "sit"in relation to one another.

3. VALUES OF INTEREST
CSS1
none
inline
block
list-item
CSS2.1
inline-block
table
table-row
table-cell
CSS3
flex
grid
Experimental
run-in

4. DISPLAY: NONE (CSS1)
Visuallyremove an element(and its children) from the page.
Element will havenoeffect onpagelayout.
jQuery: $('#elementId').hide();

5. VISIBILITY: HIDDEN (CSS2.1)
Render an element(and its children) as invisible.
Pagelayout will beeffected byhiddenelement.
ViewDemonstration

6. DISPLAY: INLINE (CSS1)
<span>, <a>, <b>, <img> ...
Flow ó

7. DISPLAY: BLOCK (CSS1)
<h1>, <p>, <div> ...
Flow ↕

8. DISPLAY: INLINE-BLOCK (CSS2.1)
Follows naturalinline flow, butgives us characteristics of block
elements.
Flow ó

9. COMPARING WITH FLOAT
inline-blockelements render the same waythattextwould.
Adjustalignmentusingvertical-alignif needed.
Aa
ViewDemonstration

10. ISSUES: SPACE IN MARKUP
Havingspaces or newlines in your HTML markup willlead
to unwanted space between elements.
<ulclass="inline-block">
<li>ItemA</li>
<li>ItemB</li>
...
</ul>
ViewDemonstration

11. ISSUES: IE7 COMPATABILITY
IE7 onlyallows inline-blockon naturallyinline elements.
.inline-block{
...
/*IE7Fix*/
zoom:1;
*display:inline;
}

12. DISPLAY: TABLE-* (CSS2.1)
Allows for table characteristics to be applied through CSS.
Usefulfor verticalcentering.
<divstyle="display:table;">
<divstyle="display:table-row;">
<divstyle="display:table-cell;">
YES,THISISCONTENT.
</div>
</div>
</div>

13. OVERVIEW
+
-
float
Full browsersupport.
Parentcontainercollapse (requires "clearfixhack").
+
+
-
-
inline-block
No collapsingofparentcontainer.
Full browsersupport(ish).
Requires "hack" forIE7support.
Issue with whitespace in markup.
+
+
-
-
table
No collapsingofparentcontainer.
Allows forvertical centering.
No supportforIE7.
Extramarkup.

14. DISPLAY: FLEX (CSS3)
Thechildrenofa“box” canbeorderedeitherverticallyorhorizontally
withinaparent.
Flexboxallowsyoutocontrolwhathappenstoanyremainingspace.
Itispossibletonesttheseboxes,allowingforverycomplexlayouts.
Support:
Chrome(Full),Firefox(Partial),Safari(Prefixed),
Opera(Prefixed),IE10 (Partial,Prefixed),IE11 (Full)

15. IGNORED DISPLAY VALUES
run-in-Notsupported in Firefox or IE7.
grid-Onlysupported in IE 10+ prefixed?
list-item-Justuse reallists.

16. SOURCES
CSSTricks - Display
CSSTricks - Fighting theSpaceBetweenInlineBlock Elements
DesignShack -What's theDeal WithDisplay: Inline-Block
MDN- Display
Mozilla Web Development - Cross Browser Inline-Block
Quirksmode- Display
TOOLS
HakimEl Hattab / reveal.js

17. THANK YOU!
Twitter: /Github:@sblaurock sblaurock