The display declaration

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

See also the W3C specs.

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

Not supported by Netscape 4, Explorer 4 and iCab.

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:

first {display: block}
second {display: inline}
third {display: block}
first {display: block}
second {display: block}
second {display: inline}
third {display: block}

display: none

Supported by all CSS browsers but buggy in Netscape 4.

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

Live example:

first {display: block}
third {display: block}

The example is buggy in Netscape 4: it shows an empty box with a red border. However, I know that display: none works in Netscape 4 in more normal situations.

display: inline-block

Supported by Explorer 5 Mac, Safari and Opera.

From 1.1 Alpha onwards Mozilla doesn't support it any more.

In Explorer 6 it works only on elements that have a natural display of 'inline' (SPAN, A etc.)

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

Live example:

first {display: block}
third {display: block}. We're going to add a lot of content to see how the block behaves. We're going to add a lot of content to see how the block behaves. span with {display: inline-block}
We're going to add a lot of
content to see how the block behaves.
We're going to add a lot of content to see how the block behaves. We're going to add a lot of content to see how the block behaves.
div with {display: inline-block}
We're going to add a lot of
content to see how the block behaves.
We're going to add a lot of content to see how the block behaves. We're going to add a lot of content to see how the block behaves.

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

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

Not supported by Explorer 5 Windows (and Netscape 4, of course).

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:

first {display: block}
second {display: list-item}
third {display: list-item}

Comparision: normal UL

display: run-in

Supported by Opera 5+ and somewhat by Explorer 5 on Mac.

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:

first {display: block}
second {display: run-in}
third {display: block}
first {display: block}
second {display: run-in}
third {display: inline}

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

display: compact

Supported slightly buggily by Opera 5, perfectly by Opera 7.

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 of 200px, 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 :

first {display: block}
second {display: compact}
third {display: block}
first {display: block}
second {display: compact}
third {display: block; margin-left: 200px}

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

display: table

Supported by Opera 5, Konqueror, Safari and Mozilla.

Explorer 5 on Mac is buggy.

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 example:

first {display: table}
third {display: table-cell} and some more content
third {display: table-cell}
third {display: table-cell}
third {display: table-cell}

It's supposed to look like this (Mozilla 1.4):