CSS display Property
Example
Setting different display properties:
Property Definition and Usage
The display property specifies the display behavior (the type of rendering box) of an element. In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.
Formally, the display property sets an element's inner and outer display types.
| Default value: | inline |
|---|---|
| Inherited: | no |
| --- | --- |
| Version: | CSS1 |
| --- | --- |
| JavaScript syntax: | object.style.display="inline" |
| --- | --- |
/* Predefined values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* Generate boxes */
display: none;
display: contents;
/* Two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;
/* Other values */
display: table;
display: table-row; /* All table elements have an equivalent value for the CSS `display` property */
display: list-item;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers prefixed with -webkit-, -ms-, or -moz- specify the first version that supported the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 <br> Partial from 5.5 | 3.0 | 3.1 | 7.0 |
Property Values
| Value | Description |
|---|---|
| none | The element is not displayed. |
| block | The element is displayed as a block element, with a line break before and after the element. |
| inline | Default. The element is displayed as an inline element, with no line break before or after the element. |
| inline-block | The element is displayed as an inline-level block container. |
| list-item | The element is displayed as a list item. |
| run-in | The element is displayed as either block or inline, depending on the context. |
| compact | CSS had a value compact, but it was removed from CSS2.1 due to lack of widespread support. |
| marker | CSS had a value marker, but it was removed from CSS2.1 due to lack of widespread support. |
| table | The element is displayed as a block-level table. |
| inline-table | The element is displayed as an inline-level table. |
| table-row-group | The element is displayed as one or more rows of a table. |
| table-header-group | The element is displayed as one or more rows of a table header. |
| table-footer-group | The element is displayed as one or more rows of a table footer. |
| flow-root | Creates a block-level box that establishes a new block formatting context. |
| table-row | The element is displayed as a table row. |
| table-column-group | The element is displayed as one or more columns of a table. |
| table-column | The element is displayed as a table column. |
| table-cell | The element is displayed as a table cell. |
| table-caption | The element is displayed as a table caption. |
| inherit | Specifies that the display property should inherit its value from the parent element. |
More Examples
Example
Setting display: contents; displays:
Example
Setting display: inherit; displays, demonstrating how to use the inherited property value:
Example
Setting display: flex; displays:
Related Articles
CSS Tutorial: CSS Display and Visibility