Web/CSS/display-box

These keywords define whether an element generates display boxes at all.

Syntax

Valid <display-box> values:

contents '

These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details. Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.

none

Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.

Accessibility concerns

Current implementations in most browsers will remove from the accessibility tree any element with a display value of contents. This will cause the element — and in some browser versions, its descendant elements — to no longer be announced by screen reading technology. This is incorrect behavior according to the CSSWG specification.

• More accessible markup with display: contents | Hidde de Vries
• Display: Contents Is Not a CSS Reset | Adrian Roselli

Examples

In this first example, the paragraph with a class of secret is set to display: none; the box and any content is now not rendered.

display: none

HTML

<p>Visible text</p>
<p class="secret">Invisible text</p>

CSS

p.secret {
  display: none;
}

display: contents

In this example the outer <div> has a 2-pixel red border and a width of 300px. However it also has display: contents specified therefore this <div> will not be rendered, the border and width will no longer apply, and the child element will be displayed as if the parent had never existed.

HTML

<div class="outer">
  <div>Inner div.</div>
</div>

CSS

.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}

Specifications

Specification	Status
CSS Display Module Level 3The definition of 'display-box' in that specification.	Candidate Recommendation

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Support of contents

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
contents	Chrome Full support 65 Full support 65 No support 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.	Edge Full support 79	Firefox Full support 37 Full support 37 No support 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.	IE No support No	Opera Full support 52 Full support 52 No support 45 — 52 Disabled' Disabled' From version 45 until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.	Safari Full support 11.1	WebView Android Full support 65	Chrome Android Full support 65 Full support 65 No support 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.	Firefox Android Full support 57	Opera Android Full support 47 Full support 47 No support 43 — 47 Disabled' Disabled' From version 43 until version 47 (exclusive): this feature is behind the Enable experimental Web Platform features preference.	Safari iOS Full support 11.3	Samsung Internet Android Full support 9.0
Specific behavior of unusual elements when display: contents is applied to them	Chrome Full support 58	Edge Full support 79	Firefox Full support 59	IE No support No	Opera Full support 45	Safari No support No	WebView Android Full support 65	Chrome Android Full support 58	Firefox Android Full support 59	Opera Android Full support 43	Safari iOS No support No	Samsung Internet Android Full support 9.0

Legend

Full support  

Full support

No support  

No support

User must explicitly enable this feature.'

User must explicitly enable this feature.

See also

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-legacy>
• Display: Contents Is Not a CSS Reset | Adrian Roselli
• More accessible markup with display: contents — hiddedevries.nl

<display-box> by Mozilla Contributors is licensed under CC-BY-SA 2.5.