What happens to child elements when the parent has display: contents?

Q: What happens to child elements when the parent has display: contents?

`display: contents` makes the parent element disappear from the visual and layout flow, but its child elements remain visible and are rendered as if they were direct children of the grandparent. The parent itself generates no box and does not affect layout. Children are promoted in the layout hierarchy and behave as if the parent did not exist. Children remain fully interactive and accessible to user actions and assistive technologies. CSS applied to the parent box (like background, padding, or border) will not appear, but CSS targeting the children still applies. This paragraph is visible and behaves as if the parent div doesn’t exist. Another child element flows normally. Text after the contents container. In this example, the ` ` disappears from the layout, but the ` ` and ` ` elements behave as if they were direct children of the outer container, participating fully in layout and flow. Use `display: contents` to remove unnecessary wrapper elements while keeping children in the layout. Avoid relying on styling on the parent element itself, as it will not render any box. Check browser compatibility, as older browsers may not fully support `display: contents`, and some accessibility tools may have quirks.

Difficulty: 6/10

CSS Layouts, Web Accessibility, Component Design

Using `display: contents` in CSS

display: contents makes the parent element disappear from the visual and layout flow, but its child elements remain visible and are rendered as if they were direct children of the grandparent.

Key Effects on Child Elements

1
The parent itself generates no box and does not affect layout.
2
Children are promoted in the layout hierarchy and behave as if the parent did not exist.
3

What happens to child elements when the parent has display: contents?

Using `display: contents` in CSS

Scenario Questions

Follow-up Questions

What happens to child elements when the parent has display: contents?

Using display: contents in CSS

Scenario Questions

Follow-up Questions

Using `display: contents` in CSS