The display declaration

This page has been translated into Brazilian Portuguese and Italian.

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

See also the W3C specs.

Value IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.5b Konqueror 3.5.7
block
 Yes Yes Yes Yes Yes
 
inline
 Yes Yes Yes Yes Yes
 
none
 Yes Yes Yes Yes Yes
 
inline-block
 No Incomplete Yes No 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 Incomplete Yes Incomplete

Safari and Konqueror fail one of the two tests. IE8b2 does something, but it doesn't come close to being correct.
compact
 No No Buggy Buggy Buggy
 
table
 No Yes Yes Strict Yes Yes

Safari requires elements with display: table and display: table-row to show the cells correctly. The other browsers don't.
Value IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.5b Konqueror 3.5.7

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

In Explorer 6 and 7 inline-block works only on elements that have a natural display: inline.

Firefox 2 and lower don't support this value. You can use -moz-inline-box, but be aware that it's not the same as inline-block, and it may not work as you expect in some situations.

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

Safari and Konqueror handle the second test case incorrectly.

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.
Explorer 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: compact

No browser supports compact correctly.

display: compact definition from W3C:
"If a block box (that does not float and is not absolutely positioned) follows the compact box, the compact box is formatted like a one-line inline box. [...lots of stuff about the margin...]
Otherwise, the compact box becomes a block box."

The compacted box is put to the left of the following block if there's enough space for it. In the second example below the third box has a margin-left, making enough space for the compacted box. In the first example there's not enough space so the compacted box is displayed as a block.

Live example :
display: block
display: compact
display: block
display: compact
display: block; margin-left: 10em

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

Example of display: compact

display: table

Not supported by Explorer.

Safari requires elements with display: table and display: table-row to show the cells correctly.

iCab doesn't show the text 'display: table-row'.

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.