CSS Display Property

2008 Oct 17

display
Values none | inline | block | inline-block | list-item | run-in | inline-table | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inherit
Initial Value inline
Applies to all elements
Inherited no

The way an element is actually displayed can change if it is floated or positioned. If an element is absolutely positioned the value of float is set to none.

Changing roles is what is needed sometimes, such as changing element instances from block to inline or inline to block.

Example of block to inline:

CSS+HTML Results 
.li_v2h li { display: inline; 
             border-right: 1px solid; 
             padding: 0 0.3em; }
.li_v2h li:first-child { border-left: 1px solid; }
...
<ul class="li_v2h">
<li>Ch_1</li>
<li>Ch_2</li>
<li>Ch_3</li>
<li>Ch_4</li>
<li>Ch_5</li>
</ul>
  • Ch_1
  • Ch_2
  • Ch_3
  • Ch_4
  • Ch_5

Example of inline to block:

CSS+HTML Results 
div#h2v a { display: block; }
...
<div id="h2v">
<a href=x1.html>X1</a>
<a href=x2.html>X2</a>
<a href=x3.html>X3</a>
<a href=x4.html>X4</a>
<a href=x5.html>X5</a>
</div>

inline-block Elements

This hybrid of block and inline results in text laid out in a line just as an image is as a replaced element. Thus the bottom of a inline-block element rests on the baseline of the text line by default and will not line-break before, after or within itself. Otherwise the element is laid out as though the element is block-level. The height and width properties apply, and can result in increasing the line height. Here are some examples:

CSS+HTML Results 
div { margin: 1em 0; border: 1px sold; }
.p_dash { border: 1px: dashed; }
.d_b  p { display: block; width: 6em; text-align: center; }
.d_i  p { display: inline; width: 6em; text-align: center; }
.d_ib p { display: inline-block; width: 6em; text-align: center; }
...
<div class=d_b>
This text is content for a block-level element.
Within it is another block-level element. 
<p class=p_dash>This is a block-level paragraph.</p>
This is the rest of the DIV - which is still block-level.
</div>
<div class=d_i>
This text is content for a block-level element. 
Within it is an inline-level element. 
<p class=p_dash>This is an inline-level paragraph.</p>
This is the rest of the DIV - which is still block-level.
</div>
<div class=d_ib>
This text is content for a block-level element. 
Within it is an inline-level element. 
<p class=p_dash>This is the inline-block<br>paragraph.</p>
This is the rest of the DIV - which is still block-level.
</div>
This text is content for a block-level element. Within it is another block-level element.

This is a block-level paragraph.

This is the rest of the DIV - which is still block-level.
This text is content for a block-level element. Within it is an inline-level element.

This is an inline-level paragraph.

This is the rest of the DIV - which is still block-level.
This text is content for a block-level element. Within it is an inline-level element.

This is the inline-block
paragraph.

This is the rest of the DIV - which is still block-level.
IE does inline-block not quite right!

run-in Elements

This hybrid display variation allows a heading to appear as part of a paragraph of text. This is done by making the heading a run-in and making the next element block-level

CSS+HTML Results 
<h2 style="display: run-in; 
              border: 1px dashed; 
              font-size: 148%;">
Run-in Elements</h2>
<span style="border-top: double">This CSS2 effect 
of making a normally block level element be in 
line is used in typography quite often.</span>

Run-in Elements

This CSS2 effect of making a normally block level element be in line is used in typography quite often.
Not many browsers do this right yet!