What is the CSS `display` property and can you give a few examples of its use?

TL;DR

The display property controls which boxes an element generates and how those boxes participate in layout. A value can describe both the element's outer role—block-level or inline-level—and how its children are laid out—flow, Flexbox, Grid, table layout, and so on. display: none generates no boxes for the element or descendants and normally removes them from the accessibility tree as well.

What is the CSS `display` property and can you give a few examples of its use?

Outer and inner display types

Many common values combine an outer display type with an inner formatting context:

Value	Outer behavior	Child layout
`block`	Block-level box	Normal flow
`inline`	Inline-level box that can fragment across lines	Normal inline flow
`inline-block`	Atomic inline-level box	Flow-root formatting context
`flex`	Block-level box	Flexbox
`inline-flex`	Inline-level box	Flexbox
`grid`	Block-level box	Grid
`inline-grid`	Inline-level box	Grid
`list-item`	Block or inline principal box plus a marker	Normal flow

For example, a navigation list can remain a semantic list while its children use Flexbox:

<nav aria-label="Primary">
  <ul class="nav-list">
    <li><a href="/products">Products</a></li>
    <li><a href="/pricing">Pricing</a></li>
  </ul>
</nav>

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

Changing display changes layout boxes, not the HTML element's meaning. A div with display: table does not become a semantic HTML table, and a list needs appropriate markup even if its marker is visually removed. Because suppressing markers can affect how some browser and assistive-technology combinations expose a list, verify the accessibility tree as well as the DOM.

Hiding and suppressing boxes

display: none suppresses the element's entire box subtree. It is appropriate when content should be unavailable in the current state, but not for text intended only for screen readers or for an animation that needs a rendered start and end state.

display: contents suppresses the element's own box while its children participate as though they were direct children of the surrounding layout. It can help with wrapper-heavy Grid layouts, but it does not remove the element from the DOM and has had accessibility interoperability issues for some element and browser combinations. Test its semantics before using it on meaningful containers.

Table and internal values

Values such as table, table-row, and table-cell use the CSS table formatting model. More specialized internal values normally belong to that model and are rarely chosen for general application layout. Grid and Flexbox are clearer for most non-tabular arrangements.

Use browser layout overlays and the computed display value when debugging. The element's default user-agent style may differ by element, and some declared values compute to a pair of outer and inner types.

Exercises

Beta

What is the CSS `display` property and can you give a few examples of its use?

TL;DR