display: contents
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. 2.5. Box Generation: the none and contents keywords
Links about display: contents
Display: Contents Is Not a CSS Reset
CSS resets are a collection of CSS styles that undo the default browser styling of many or most HTML elements. Recently I have seen cases of developers using display: contents on lists and headings to remove the margins and padding, and generally to visually do what a CSS reset might…
Tags:More accessible markup with display: contents
The website of Hidde de Vries, freelance front-end developer.
Tags:Digging Into The Display Property: Box Generation — Smashing Magazine
Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at the values which control box generation, for those times when you don’t want to generate a box at all.
This might be interesting as well
Digging Into The Display Property: The Two Values Of Display — Smashing Magazine
We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series.

Code sample
ul {
display: contents;
}
Explore other pages
- details
A disclosure widget from which the user can obtain additional information.
- content-visibility
Controls whether or not an element renders its contents at all.
- aria-current
Indicates the current item within a set of related elements.
- grid-template-rows
Specifies named grid areas.