The display
CSS property defines the display type of an element, which consists of the two basic qualities of how an element generates boxes — the outer display type defining how the box participates in flow layout, and the inner display type defining how the children of the box are laid out.
Some values of display
are fully defined in their own individual specifications; see the table at the end of this document for links to all relevant specifications. The full list of values is as below.
/* <display-outside> values */ display: block; display: inline; display: run-in; /* <display-inside> values */ display: flow; display: flow-root; display: table; display: flex; display: grid; display: ruby; /* <display-outside> plus <display-inside> values */ display: block flow; display: inline table; display: flex run-in; /* <display-listitem> values */ display: list-item; display: list-item block; display: list-item inline; display: list-item flow; display: list-item flow-root; display: list-item block flow; display: list-item block flow-root; display: flow list-item block; /* <display-internal> values */ display: table-row-group; display: table-header-group; display: table-footer-group; display: table-row; display: table-cell; display: table-column-group; display: table-column; display: table-caption; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container; /* <display-box> values */ display: contents; display: none; /* <display-legacy> values */ display: inline-block; display: inline-table; display: inline-flex; display: inline-grid; /* Global values */ display: inherit; display: initial; display: unset;
Initial value | inline |
---|---|
Applies to | all elements |
Inherited | no |
Media | all |
Computed value | as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified. |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
The display
property is specified using keyword values. Keyword values are grouped into six value categories:
<display-outside>
<display-inside>
<display-listitem>
<display-internal>
table
and ruby
have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those "internal" display values, which only have meaning within that particular layout mode.<display-box>
<display-legacy>
display
property, requiring separate keywords for block-level and inline-level variants of the same layout mode.<display-xul>
Deprecated since Gecko 62
The Level 3 specification details two values for the display
property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.
The display-legacy methods allow the same results with single keyword values, and should be favoured by developers until the two keyword values are better supported. For example, using two values you might specify an inline flex container as follows:
.container { display: inline flex; }
This can currently be specified using a single value.
.container { display: inline-flex; }
[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid
The individual pages for the different types of value that display
can have set on it feature multiple examples of those values in action — see the Syntax section.
In addition, you can find detailed explanations of the layout models that certain values enable elsewhere on MDN:
display: none;
Using a display
value of none
on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
If you want to visually hide the element, a more accessible alternative is to use a combination of properties to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.
display: contents;
Browsers will remove any element with a display
value of contents
set on it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
Changing the display
value of a <table>
element to block
, grid
, or flex
will alter its representation in the accessibility tree. This will cause the table to no longer be announced properly by screen reading technology.
Specification | Status | Comment |
---|---|---|
CSS Display Module Level 3 The definition of 'display' in that specification. | Candidate Recommendation | Added run-in , flow , flow-root , contents , and multi-keyword values. |
CSS Ruby Layout Module Level 1 The definition of 'display' in that specification. | Working Draft | Added ruby , ruby-base , ruby-text , ruby-base-container , and ruby-text-container . |
CSS Grid Layout The definition of 'display' in that specification. | Candidate Recommendation | Added the grid box model values. |
CSS Flexible Box Layout Module The definition of 'display' in that specification. | Candidate Recommendation | Added the flexible box model values. |
CSS Level 2 (Revision 1) The definition of 'display' in that specification. | Recommendation | Added the table model values and inline-block.
|
CSS Level 1 The definition of 'display' in that specification. | Recommendation | Initial definition. Basic values: none , block , inline , and list-item . |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 7 | 1 |
display-outside |
1 | 12 | 1 | 4 | 7 | 1 |
display-outside : display: run-in support |
? — 32 | No | No | 8 | ? — 19 | ? — 7 |
Multi-keyword values | ? | ? | No | No | ? | ? |
list-item |
1 | 12 | 1 | 6 | 7 | 1 |
list-item : Supported on <legend>
|
No | No | 64 | No | No | Yes |
inline-block |
1 | 12 | 1 | 8
|
7 | 1 |
inline-table |
1 | 12 | 3 | 8 | 7 | 1 |
table , table-cell , table-column , table-column-group , table-footer-group , table-header-group , table-row , and table-row-group
|
1 | 12 | 1 | 8 | 7 | 1 |
flex |
29
|
12 | 20
|
11
|
16
|
9
|
inline-flex |
29
|
12 | 20
|
11
|
16
|
9
|
grid
|
57 | 16
|
52 | 10
|
44 | Yes |
inline-grid
|
57 | 16
|
52 | 10
|
44 | ? |
subgrid
|
No | No | No | No | No | No |
ruby , ruby-base , ruby-base-container , ruby-text , and ruby-text-container
|
? | 12 | 38
|
? | ? | ? |
run-in
|
1 — 32
|
No | No | 8 | 7 — 15 | 1 — 8
|
flow-root
|
58 | ? | 53 | ? | 45 | ? |
contents
|
65
|
No | 37
|
No | 52 | 11.1 |
contents : Specific behavior of unusual elements when display: contents is applied to them
|
? | No | 59 | No | No | No |
-moz-box and -moz-inline-box
|
No | No | ? — 64
|
No | No | No |
-moz-grid , -moz-inline-grid , -moz-grid-group and -moz-grid-line
|
No | No | ? — 62
|
No | No | No |
-moz-stack and -moz-inline-stack
|
No | No | ? — 62
|
No | No | No |
-moz-deck
|
No | No | ? — 62
|
No | No | No |
-moz-popup
|
No | No | ? — 62
|
No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | 12 | 4 | Yes | Yes | Yes |
display-outside |
Yes | Yes | 12 | 4 | Yes | Yes | Yes |
display-outside : display: run-in support |
Yes | ? — 32 | No | No | ? — 19 | ? — 7 | Yes |
Multi-keyword values | ? | ? | ? | No | ? | ? | ? |
list-item |
Yes | Yes | 12 | 4 | Yes | Yes | Yes |
list-item : Supported on <legend>
|
No | No | No | 64 | No | Yes | No |
inline-block |
Yes | Yes | 12 | 4 | Yes | Yes | Yes |
inline-table |
Yes | Yes | 12 | 4 | Yes | Yes | Yes |
table , table-cell , table-column , table-column-group , table-footer-group , table-header-group , table-row , and table-row-group
|
Yes | Yes | 12 | 4 | Yes | Yes | Yes |
flex |
4.4
|
29
|
12 | 20
|
16
|
9
|
Yes |
inline-flex |
4.4
|
29
|
12 | 20
|
16
|
9
|
Yes |
grid
|
57 | 57 | 16
|
52 | 44 | Yes | 7.0 |
inline-grid
|
57 | 57 | 16
|
52 | 44 | ? | 7.0 |
subgrid
|
No | No | No | No | No | No | No |
ruby , ruby-base , ruby-base-container , ruby-text , and ruby-text-container
|
? | ? | 12 | 38
|
? | ? | ? |
run-in
|
? — 4.4.3
|
? — 32
|
No | No | ? | ? — 8
|
? |
flow-root
|
58 | 58 | ? | 53 | 45 | ? | 7.0 |
contents
|
65 | 65 | No | 57 | 52 | 11.1 | No |
contents : Specific behavior of unusual elements when display: contents is applied to them
|
? | ? | No | 59 | No | No | ? |
-moz-box and -moz-inline-box
|
No | No | No | ? — 64
|
No | No | No |
-moz-grid , -moz-inline-grid , -moz-grid-group and -moz-grid-line
|
No | No | No | ? — 62
|
No | No | No |
-moz-stack and -moz-inline-stack
|
No | No | No | ? — 62
|
No | No | No |
-moz-deck
|
No | No | No | ? — 62
|
No | No | No |
-moz-popup
|
No | No | No | ? — 62
|
No | No | No |
visibility
, float
, position
grid
, flex
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/display