These keywords define whether an element generates display boxes at all.
contents
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.none
visibility
property instead.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.
<p>Visible text</p> <p class="secret">Invisible text</p>
p.secret { display: none; }
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> </div>
.outer { border: 2px solid red; width: 300px; display: contents; } .outer > div { border: 1px solid green; }
contents
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 65
|
No | 37
|
No | 52 | 11.1 |
Specific behavior of unusual elements when display: contents is applied to them
|
? | No | 59 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
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 | ? |
display
© 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-box