Black Lives Matter! ✊🏾

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 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…

  2. More accessible markup with display: contents

    posted on by Hidde de Vries

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

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

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