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.
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.
In this example, the <div> disappears from the layout, but the <p> and <span> elements behave as if they were direct children of the outer container, participating fully in layout and flow.
Use
display: contentsto 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.