display (CSS property)

Spec
Inherited Initial Version
No inline CSS1, 2, 2.1
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Full Partial Buggy Full Buggy

Syntax

display: { block | inline | inline-block | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | none | inherit } ;

Description

This property controls the type of box an element generates.

The computed value may differ from the specified value for the root element and for floated or absolutely positioned elements; see The Relationship Between display, position, and float for details about the relationship between the display, float, and position properties.

Note that a user agent style sheet may override the initial value of inline for some elements.

Example

The following rule will cause a elements that are descendants of the .menu element to render as block elements instead of inline elements:

.menu a {
  display: block;
}

Value

block
block makes the element generate a block box.
inline
inline makes the element generate one or more inline boxes.
inline-block
inline-block makes the element generate a block box that’s laid out as if it were an inline box.
inline-table
inline-table makes the element behave like a table that’s laid out as if it were an inline box.
list-item
list-item makes the element generate a principal block box and a list-item inline box for the list marker.
run-in
A value of run-in makes the element generate either a block box or an inline box, depending on the context. If the run-in box doesn’t contain a block box, and is followed by a sibling block box (except a table caption) in the normal flow that isn’t, and doesn’t contain, a run-in box, the run-in box becomes the first inline box of the sibling block box. Otherwise, the run-in box becomes a block box.
table
table makes the element behave like a table.
table-caption
table-caption makes the element behave like a table caption.
table-cell
table-cell makes the element behave like a table cell.
table-column
table-column makes the element behave like a table column.
table-column-group
table-column-group makes the element behave like a table column group.
table-footer-group
table-footer-group makes the element behave like a table footer row group.
table-header-group
table-header-group makes the element behave like a table header row group.
table-row
table-row makes the element behave like a table row.
table-row-group
table-row-group makes the element behave like a table body row group.
none
A value of none makes the element generate no box at all. Descendant boxes cannot generate boxes either, even if their display property is set to something other than none.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Full Partial Partial Partial Partial Partial Buggy Buggy Buggy Buggy Full Full Full Buggy

Internet Explorer versions up to and including 7:

  • don’t support the values inline-table, run-in, table, table-caption, table-cell, table-column, table-column-group, table-row, and table-row-group
  • only support the values table-footer-group and table-header-group for thead and tfoot elements in HTML
  • only support the value inline-block for elements that are naturally inline or have been set to inline outside the declaration block.

    To clarify further all you need do to make IE7 and under behave as if they understood inline-block on block level elements is to first declare the element as inline-block and then in a new declaration block also declare the element as inline. Of course the subsequent rule would need to be hidden from browsers other than IE7 and under or they will be converted back to inline. Visit Claire Cambell for more information on this discovery.

  • treat block as list-item on li elements in HTML
  • will apply a layout to inline-block elements
  • don’t support the value inherit

Firefox versions up to and including 2.0, and Opera 9.2 and prior versions:

  • only support the value table-column-group for colgroup elements in HTML
  • only support the value table-column for col elements in HTML

Firefox versions up to and including 2.0 don’t support the values inline-block, inline-table, or run-in.

Firefox versions 3 and 3.5 don’t support the value run-in

Safari up to and including version 3.1 and Chrome version 1 require elements width a value of table to have the nested element set to table-row in order to render contents correctly (source quirksmode.org). Firefox also suffers from this problem as documented in this long standing bug.

Safari up to and including version 3.0 and Chrome versions 1 and 2 all support the value run-in when it occurs before an element width a value of inline, which is incorrect behaviour (source quirksmode.org).

User-contributed notes

ID:
#10
Contributed:
by zuke
Date:
Wed, 17 Aug 2011 14:27:39 GMT

Paul O'B

the

div.test {
display:inline;
zoom:1.0;
}

Really made my day, got IE9 and he does not display the "display: table-cell" or "display: table" correctly
(in my case the div is a paragraph next to a picture that floats left, but that div should also scale to the whole width if no picture is present. The div also carries a background picture which made me mad)

div.test {
display:table-cell;
zoom:1.0;
}

THANK YOU

ID:
#9
Contributed:
by Paul O'B
Date:
Sun, 05 Jun 2011 16:44:52 GMT

If you set an element to display:table and the element has padding and dimensions then in Firefox, Opera and IE8+ the padding is added to to the dimensions unlike a real table when the padding would not change the overall width of the element.

A solution is to use "box-sizing:border-box" to set all browsers to use the border box model just like a real table.

ID:
#8
Contributed:
by joezim007
Date:
Tue, 31 Aug 2010 20:29:25 GMT

A couple times you said "width" when it should say "with".

ID:
#6
Contributed:
by LiamNZ
Date:
Wed, 11 Feb 2009 23:34:14 GMT

To further daveclarke's tip about display:table-row in IE7 and below:

If you are using javascript to hide/show table rows, you can do the following:

// Hide table row:
tableRow.style.display = "none";

//Show the table row:
tableRow.style.display = ""; //sets back to default

This works cross-browser, and you don't have to switch class names.

ID:
#5
Contributed:
by Paul O'B
Date:
Mon, 25 Aug 2008 18:28:00 GMT

To clarify further the point that Kevin made below all you need do to make IE7 and under behave as if they understood display:inline-block on block level elements is to declare the element as an inline element and then apply "haslayout" to it.

If you set the element to display:inline then you cannot use the "haslayout" trigger of display:inline-block because that cancels out the display:inline setting you just made.

That's the reason that the display:inline must be in a separate rule otherwise the element never gets a chance to gain layout.

The following will make block level elements behave as inline-blocks.

div.test {
display:inline;
zoom:1.0;
}

The "haslayout" trigger must be one that works for inline elements which is why width and height cannot be used as they don't apply to inline elements (because we just made the div display:inline).

You could use display:inline-block as it is a "haslayout" trigger but if you use it in the same rule it cancels out the display:inline and all you get is an element that has a layout but will not behave like an inline block.

That's the reason that when using display:inline-block you need to put it into a separate rule so that the element can first be allowed to become an inline element.

display:inline-block actually confuses the issue here and the simple fact is that inline-block behaviour in IE is accomplished by applying "haslayout" on an inline element. The actual property display:inline-block is irrelevant and only useful in the fact that it causes "haslayout" to be true.

For elements that are naturally inline like anchors you can use any property that causes haslayout to be true but it must be a property that the inline element understand which is why width and height are no good. zoom:1.0 or display:inline-block on an anchor will both cause it to behave like an inline block element.

ID:
#4
Contributed:
by Kevin Yank
Date:
Thu, 22 May 2008 16:15:56 GMT

To clarify the situation with inline-block and Internet Explorer 7 and earlier, the effect of setting display: inline-block in that browser is to give the affected elements 'layout' (see hasLayout), forcing their contents to be displayed in a block.

Consequently, display: inline-block behaves as expected on elements that would normally be styled inline (e.g. span). Block elements will simply be given 'layout'.

In order to achieve the desired effect in IE7 and earlier on block elements, you must subsequently (in a different declaration block) set display back to inline. The affected elements will keep 'layout' (their contents will still be laid out in a block), but they will be positioned inline.

The best way to achieve this, then, is to set display: inline-block in your main style sheet, and then set display: inline in a separate style sheet for IE7 and earlier (using conditional comments).

ID:
#3
Contributed:
by daveclarke
Date:
Mon, 03 Mar 2008 02:50:04 GMT

To hide/show a table row in a way that works in IE, you can create a class "hide" and give it the rule "display:none". To hide a table row, assign the class to the row element, to show the row element just remove the class - don't try to assign "display:table-row", it won't work. This may also work with other display values for IE but I haven't tried it.

Related Products