W3cubDocs

/CSS

CSS Display

CSS Display is a module of CSS that defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.

Reference

CSS properties

CSS data types

Guides

CSS Flow Layout (display: block, display: inline)

display: flex

display: grid

Specifications

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 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.

In addition to the CSS Display Specification Level 3, further specifications define the behavior of various values of display.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
display 1 12 1 4 7 1
contents 65
65
58 — 65
Disabled
Disabled From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
 79 37
37
36 — 53
Disabled
Disabled From version 36 until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No 52
52
45 — 52
Disabled
Disabled From version 45 until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
 11.1
contents: Specific behavior of unusual elements when display: contents is applied to them 58 79 59 No 45 No
<display-outside> 1 12 1 4 7 1
display-outside.run-in 1 — 32
1 — 32
Before Chrome 4, run-in was not supported before inline elements.
 No No 8 7 — 19 1 — 8
1 — 8
Before Safari 5, run-in was not supported before inline elements.
flex 29
29
21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 12 20
20
Firefox 28 added multi-line flexbox support.
18 — 28
Disabled
Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 11
11
IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers.
8
IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers.
Uses the non-standard name: -ms-flexbox
16
16
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12.1 — 15
9
9
6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
flow-root 58 79 53 No 45 13
grid 57 16
16
12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
 52 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Internet Explorer implements an older version of the specification.
 44 10.1
inline-block 1 12 1 8
8
6
Until Internet Explorer 8, inline-block is only for natural inline elements.
 7 1
inline-flex 29
29
21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 12 20
20
Firefox 28 added multi-line flexbox support.
18 — 20
Disabled
Disabled From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 11
11
8
Uses the non-standard name: -ms-inline-flexbox
16
16
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 9
9
6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
inline-grid 57 16
16
12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
 52 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Internet Explorer implements an older version of the specification.
 44 10.1
inline-table 1 12 3 8 7 1
list-item 1 12 1 6 7 1
list-item: Supported on <legend> 71 79 64 No 58 No
Multi-keyword values No No 70 No No No
none 1
1
Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
 12 1 4 7
7
Opera 52 stopped creating layout objects for elements inside an <iframe> with display:none applied.
 1
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container No 12 — 79 38
38
34 — 38
Disabled
Disabled From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 7 No No
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
-moz-box and -moz-inline-box No No 1 — 64
1 — 64
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-box-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-deck No No 1 — 62
1 — 62
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-grid, -moz-grid-group, and -moz-grid-line No No 1 — 62
1 — 62
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-inline-grid and -moz-inline-stack No No 1 — 62
1 — 62
Available to Firefox UI code.
62 — 70
Disabled
Disabled From version 62 until version 70 (exclusive): this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-popup No No 1 — 62
1 — 62
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-stack No No 1 — 62
1 — 62
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
display ≤37 18 4 10.1 1 1.0
contents 65 65
65
58 — 65
Disabled
Disabled From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
 57 47
47
43 — 47
Disabled
Disabled From version 43 until version 47 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
 11.3 9.0
contents: Specific behavior of unusual elements when display: contents is applied to them 65 58 59 43 No 9.0
<display-outside> 1 18 4 10.1 1 1.0
display-outside.run-in ≤37 — ≤37 18 — 32 No 10.1 — 19 1 — 8
1 — 8
Before Safari 5, run-in was not supported before inline elements.
 1.0 — 2.0
flex 4.4
4.4
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 29
29
25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 20
20
Firefox 28 added multi-line flexbox support.
18 — 28
Disabled
Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 16
16
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12.1 — 14
9
9
7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 2.0
2.0
1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
flow-root 58 58 53 43 13 7.0
grid 57 57 52 43 10.3 6.0
6.0
Samsung Internet added this earlier than the corresponding Chrome version would indicate.
inline-block ≤37 18 4 14 1 1.0
inline-flex 4.4
4.4
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 29
29
25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 20
20
Firefox 28 added multi-line flexbox support.
18 — 20
Disabled
Disabled From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 16
16
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 9
9
6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
 2.0
2.0
1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
inline-grid 57 57 52 43 10.3 6.0
6.0
Samsung Internet added this earlier than the corresponding Chrome version would indicate.
inline-table ≤37 18 4 14 1 1.0
list-item ≤37 18 4 14 1 1.0
list-item: Supported on <legend> 71 71 64 50 No 10.0
Multi-keyword values No No No No No No
none ≤37
≤37
WebView 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
 18
18
Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
 4 10.1
10.1
Opera Android 47 stopped creating layout objects for elements inside an <iframe> with display:none applied.
 1 1.0
1.0
Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container No No 38
38
34 — 38
Disabled
Disabled From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group ≤37 18 4 14 1 1.0
-moz-box and -moz-inline-box No No 4 — 64
4 — 64
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-box-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-deck No No 4 — 62
4 — 62
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-grid, -moz-grid-group, and -moz-grid-line No No 4 — 62
4 — 62
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-inline-grid and -moz-inline-stack No No 4 — 62
4 — 62
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-popup No No 4 — 62
4 — 62
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No
-moz-stack No No 4 — 62
4 — 62
This is still available to Firefox UI code.
62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No No No

Edit this page on MDN

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Display