CSS display Property
More "Try it Yourself" examples below.
Definition and Usage
The display property specifies the type of box used for an HTML element.
| Default value: | inline |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS1 |
| JavaScript syntax: | object.style.display="none" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | ||||||
|---|---|---|---|---|---|---|
| display | 4.0 | 12.0 | 8.0 Partial from 5.5 |
3.0 | 3.1 | 7.0 |
Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", and "table-row-group" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.
Note: The values "flex" and "inline-flex" requires a prefix to work in Safari. For "flex" use "display: -webkit-flex", for "inline-flex" use "display: -webkit-inline-flex;".
CSS Syntax
display: value;
Property Values
| Value | Description | Play it |
|---|---|---|
| inline | Default value. Displays an element as an inline element (like <span>) | Play it » |
| block | Displays an element as a block element (like <p>) | Play it » |
| flex | Displays an element as an block-level flex container. New in CSS3 | |
| inline-block | Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box | |
| inline-flex | Displays an element as an inline-level flex container. New in CSS3 | |
| inline-table | The element is displayed as an inline-level table | |
| list-item | Let the element behave like a <li> element | Play it » |
| run-in | Displays an element as either block or inline, depending on context | |
| table | Let the element behave like a <table> element | |
| table-caption | Let the element behave like a <caption> element | |
| table-column-group | Let the element behave like a <colgroup> element | |
| table-header-group | Let the element behave like a <thead> element | |
| table-footer-group | Let the element behave like a <tfoot> element | |
| table-row-group | Let the element behave like a <tbody> element | |
| table-cell | Let the element behave like a <td> element | |
| table-column | Let the element behave like a <col> element | |
| table-row | Let the element behave like a <tr> element | |
| none | The element will not be displayed at all (has no effect on layout) | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
A demonstration of how to use the inherit property value:
body {
display: inline;
}
p {
display: inherit;
}
Try it yourself »
Example
Set the direction of some flexible items inside a <div> element in reverse order:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
Try it yourself »
Related Pages
CSS tutorial: CSS Display and visibility
HTML DOM reference: display property
