What is the difference between display: contents and display: none?
Difference Between display: contents and display: none in CSS
display: contents and display: none both affect how elements appear in the layout, but in very different ways.
- 1
display: nonecompletely removes the element from the layout and rendering flow; it occupies no space and its children are not displayed. - 2
display: contentsmakes the element itself disappear visually and from the layout, but its children are still rendered as if they were direct children of the parent. - 3
With
display: none, the element and all its descendants are hidden and inaccessible to interactions and assistive technologies. - 4
With
display: contents, the children remain visible and interactive, but the container element itself has no box or styling effect. - 5
display: contentsis useful when you want to remove a wrapper element without affecting child elements, whereasdisplay: noneis used to hide elements entirely.
In this example, the first div with display: none hides both itself and its paragraph. The second div with display: contents disappears visually, but its paragraph is still visible and participates in the layout.
- 1
Use
display: contentsto remove unnecessary wrappers while keeping child elements visible and interactive. - 2
Use
display: noneto completely hide elements and their children from both visual rendering and layout. - 3
Be cautious with
display: contents, as some accessibility tools and older browsers may not fully support it.