Asv3's Blog

September 27, 2009

Display of display attribute in CSS

Filed under: css — Tags: , , , , , , , , — asv3 @ 3:11 am

block, inline and none are the only 3 values supported by all browsers, inline-block is not supported in IE5.5 and FF2, and IE6/IE7 respect inline-block only when it’s assigned to natural inline elements. list-item is supported in all browsers except IE5.5, run-in is buggy in almost all browsers except IE8+ and Opera 9.62+

I suggest you block, inline and none freely where-ever you can, and inline-block if you are targeting IE8+ and FF3+, it’s better not to use rest of the values. Also note <img> is an inline element.

display:block

The element displayed as a block, like <p>, <div>, <h[1-5]>. Block level elements have default display set to block. Block-level elements and elements that have display set to block, always starts from new line/block, unless you float it.

display:inline

inline used to make an block level element behave like an inline element.  width attribute of inline elements are often ignored, whichever element need to support width attribute that should not have display set to inline.

display:none

used to remove an element from document flow, browser skips rendering all elements set to display none, often used to hide/unhide elements in page.

display:inline-block

used when you have to specify width to an inline elements. Refer to the limitations of this property said above.

Others, run-in, list-item, compact, table, table-row, table-cell, table-caption. but if you not just trying to experiment its good avoiding these values.

Create a free website or blog at WordPress.com.