| Inherited | Initial | Version |
|---|---|---|
| No | inline |
CSS1, 2, 2.1 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ |
|---|---|---|---|
| Partial | Partial | Full | Full |
Syntax
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
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
| Internet Explorer | Firefox | Safari | Opera | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| Partial | Partial | Partial | Partial | Partial | Partial | Full | Full | Full | Full | 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:
- #5
- 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
- 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
- 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.