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

1. Display: Contents Is Not a CSS Reset

   posted on June 22, 2019 by Adrian Roselli

   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:

   • accessibility
   

2. More accessible markup with display: contents

   posted on April 21, 2018 by Hidde de Vries

   The website of Hidde de Vries, freelance front-end developer.

   Tags:

   • accessibility
   

3. Digging Into The Display Property: Box Generation — Smashing Magazine

   posted on May 1, 2019 by Rachel Andrew

   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

posted on April 8, 2019 by Rachel Andrew

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;
}