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
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
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