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


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

Formal syntax

Syntax not found in DB!


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


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


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.


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


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

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


Browser compatibilityUpdate compatibility data on GitHub

Support of contents

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 65
58 — 65
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.
No 37
36 — 53
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 11.1
Specific behavior of unusual elements when display: contents is applied to them ? No 59 No No No
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 65 65 No 57 52 11.1 No
Specific behavior of unusual elements when display: contents is applied to them ? ? No 59 No No ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.