Back to the index.
See the specification.
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|
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
float declaration to another element, for instance).
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
display: none means that the element is not displayed at all (so you won't see it in the example either).
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.
div) with display: inline-block; width: 10em
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
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: 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).
display: run-in definition from
"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?
display: table tells the element to display as a table. Nested elements should be displayed as
table-cell, mimicking the good old TRs and TDs.
Play around with some display declarations below.