CSS display Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The display CSS property specifies the type of box generated by an element.
The following table summarizes the usages context and the version history of this property.
| Default value: | inline |
|---|---|
| Applies to: | All elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | CSS 1, 2, 3 |
Usage Notes
The computed value of the
displayproperty may differ from the specified value for the root element and for floated or absolutely positioned elements.If the value of
displayproperty is set tonone— the element generates no boxes at all, and has no effect on layout; the element and its content are removed from the formatting structure entirely, and the document is rendered as though the element did not exist in the document tree.
Syntax
The syntax of the property is given with:
| display: | inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit |
The example below shows the display property in action.
Example
Try this code »div {
display: inline;
}
span {
display: block;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
inline |
The element generates an inline-level box. |
block |
The element generates a block-level box. |
contents |
The element itself does not generate any boxes, but its children and pseudo-elements generate boxes and text runs as normal. |
flex |
The element generates a block-level flex container box. |
flow |
The element lays out its contents using flow layout (block-and-inline layout). |
flow-root |
The element generates a block container box, and lays out its contents using flow layout. |
grid |
The element generates a block-level grid container box. |
inline-block |
The element generates a block box that's laid out as if it were an inline box. |
inline-flex |
The element generates an inline-level flex container box. |
inline-grid |
The element generates an inline-level grid container box. |
inline-table |
The element behaves like a table that,s laid out as if it were an inline box. |
list-item |
The element generates a block box for the content and a separate inline box for the list marker. |
run-in |
The element generates either a block or an inline box, depending on the context. |
table |
The element behaves like the <table> HTML element. |
table-caption |
The element behaves like the <caption> HTML element. |
table-column-group |
The element behaves like the <colgroup> HTML elements. |
table-header-group |
The element behaves like the <thead> HTML elements. |
table-footer-group |
The element behaves like the <tfoot> HTML elements. |
table-row-group |
The element behaves like the <tbody> HTML elements. |
table-cell |
The element behaves like the <td> HTML elements. |
table-column |
The element behaves like the <col> HTML elements. |
table-row |
The element behaves like the <tr> HTML elements. |
none |
Turn off the display of an element. All child elements also have their display turned off, even if their display property is set to something other than none. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element display property. |
Browser Compatibility
The display property is supported in all major modern browsers.
 |
Basic Support—
|
Warning: The values such as contents, flow-root, run-in, etc. are poorly supported in most of the browsers. You should better avoid using them for the time being.
Further Reading
See tutorial on: CSS Display.
Related properties: visibility, float, position.
