The display declaration

Back to the index.

See the specification.

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.

Selector IE5.5 IE6 IE7 IE8 IE9 IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5 Mac Opera 12.14 Win Opera 12.14 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

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 TRs and TDs.

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.