display (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Partial | Partial | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | inline |
CSS1, 2, 2.1 |
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;
}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.
Value
blockblockmakes the element generate a block box.inlineinlinemakes the element generate one or more inline boxes.inline-blockinline-blockmakes the element generate a block box that’s laid out as if it were an inline box.inline-tableinline-tablemakes the element behave like a table that’s laid out as if it were an inline box.list-itemlist-itemmakes the element generate a principal block box and a list-item inline box for the list marker.run-in- A value of
run-inmakes 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. tabletablemakes the element behave like a table.table-captiontable-captionmakes the element behave like a table caption.table-celltable-cellmakes the element behave like a table cell.table-columntable-columnmakes the element behave like a table column.table-column-grouptable-column-groupmakes the element behave like a table column group.table-footer-grouptable-footer-groupmakes the element behave like a table footer row group.table-header-grouptable-header-groupmakes the element behave like a table header row group.table-rowtable-rowmakes the element behave like a table row.table-row-grouptable-row-groupmakes the element behave like a table body row group.none- A value of
nonemakes the element generate no box at all. Descendant boxes cannot generate boxes either, even if theirdisplayproperty is set to something other thannone.
Compatibility
| IE | 5.5 | Partial |
|---|---|---|
| 6.0 | Partial | |
| 7.0 | Partial | |
| Firefox | 1.0 | Partial |
| 1.5 | Partial | |
| 2.0 | Partial | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
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, andtable-row-group - only support the values
table-footer-groupandtable-header-groupfortheadandtfootelements in HTML - only support the value
inline-blockfor elements that are naturally inline or have been set toinlineoutside the declaration block - treat
blockaslist-itemonlielements in HTML - will apply a layout to
inline-blockelements - 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-groupforcolgroupelements in HTML - only support the value
table-columnforcolelements in HTML
Firefox versions up to and including 2.0 don’t support the
values inline-block,
inline-table, or
run-in.
User-contributed notes
- ID:
- #4
- Date:
- Thu, 22 May 2008 16:15:56 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
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
- 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.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
