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 IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
block
 Yes Yes Yes Yes Yes To be tested
 
inline
 Yes Yes Yes Yes Yes To be tested
 
none
 Yes Yes Yes Yes Yes To be tested
 
inline-block
 No Incomplete Yes Yes Yes Yes Yes To be tested
  • IE 6/7 accepts the value only on elements with a natural display: inline.
list-item
 No Yes Yes Yes Yes Yes To be tested
run-in
 No Yes No Incorrect Yes Yes Yes To be tested
  • Safari, Chrome and Konqueror also support run-in when it occurs before an element with display: inline. This should not happen.
table
 No Yes Yes Yes Yes Yes To be tested

Safari 3 and Chrome 1 require elements with display: table and display: table-row to show the cells correctly. The other browsers, including Safari 4 and Chrome 2, don't.
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

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.

It's supposed to work like this (Opera):

Example of display: inline-block

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.

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?

Anyway, Opera is the only browser to really support this. It removes the padding-top and -bottom of the run-in box, though W3C doesn't say it should.
IE 5 Mac reacts by giving the run-in box a slight indent. I have no idea why.

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

It's supposed to work like this (Opera):

Example of display: run-in

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

It's supposed to look like this (Firefox 1.5):

Example of the display table values in Mozilla

However, Safari insists on the elements with display: table and display: table-row:

Example of the display table values in Safari

Playground

Play around with some display declarations below.