The display declaration

This page has been translated into Brazilian Portuguese, Italian, and German.

The display property lets you define how a certain HTML element should be displayed.

See also the W3C specs.

Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
block
 Yes Yes Yes Yes Yes
 
inline
 Yes Yes Yes Yes Yes
 
none
 Yes Yes Yes Yes Yes
 
inline-block
 No Incomplete Yes Yes Yes Yes Yes
  • IE 6/7 accepts the value only on elements with a natural display: inline.
list-item
 No Yes Yes Yes Yes Yes
run-in
 No Yes No Yes Yes Yes
table
 No Yes Yes Yes Yes Yes
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac

display: block

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

Live example:
first {display: block}
second {display: block}
third {display: block}

display: inline

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

Live example:
display: block
display: inline
display: block
display: block
display: block
display: inline

display: none

display: none means that the element is not displayed at all (so you won't see it in the example either).

Live example:
display: block
display: block

display: inline-block

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

Live example:
display: block
Let's add some content to see how the block behaves.
display: inline-block; width: 10em
Let's add some content to see how the block behaves.
Let's add some content to see how the block behaves. Let's add some content to see how the block behaves. span (and not div) with display: inline-block; width: 10em
Let's add some content to see how the block behaves. Let's add some content to see how the block behaves.

The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.

Difference with display: inline

Here’s the same example, but with display: inline. Here. the inner element does not form a block at all but gets its dimensions from the outer block and the way the text wraps.

display: block
Let's add some content to see how the block behaves.
display: inline; width: 10em
Let's add some content to see how the block behaves.
Let's add some content to see how the block behaves.

display: list-item

display: list-item means that the element is displayed as a list-item, which mainly means that it has a bullet in front of it (like an UL), except in IE 5 on Mac where it gets a number (like an OL). The numbers are buggy: all previous LI's in the page count as one, so this example starts with number 5 (the screenshot was made before I inserted my compatibility-LI's).

Live example:
display: block
display: list-item
display: list-item

display: run-in

display: run-in definition from W3C:
"If a block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box.
Otherwise, the run-in box becomes a block box."

Question: Why would you want to do this?

Live example:
display: block
display: run-in
display: block
display: run-in
display: inline

display: table

display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TR's and TD's. There's also a display: table-column but it should show nothing at all, only serving for style information like a COL does. I'm not sure exactly how this works.

Live examples:
This example has divs with display: table, table-row, and table-cell, all properly nested.
display: table
display: table-row
display: table-cell and some more content
display: table-cell
display: table-row
display: table-cell
display: table-cell
The outermost div of this example has display: block, and not table.
display: block
display: table-row
display: table-cell and some more content
display: table-cell
display: table-row
display: table-cell
display: table-cell
This example has no divs with display: table-row
display: table
display: table-cell and some more content
display: table-cell

Playground

Play around with some display declarations below.