CSS Display and Box Generation

Basic

Display controls box generation

The `display` property controls how an element participates in CSS layout by determining the principal box it generates and the formatting context established by that box. This lesson owns box generation; the Flow, Flexbox, Grid, and other layout owners own their respective algorithms.

?

Outer and inner display roles

A display value can be understood through an outer display role and an inner display role. The outer role describes how the principal box participates in its parent formatting context; the inner role describes the formatting context used for its children. This distinction lets CSS describe combinations such as a block-level box whose contents use Flex layout.

1
2
3

.toolbar {
  display: block flex;
}

?

Common display values are model choices

Values such as `block`, `inline`, `flow-root`, `flex`, `grid`, `table`, and `none` select different box-generation or formatting behaviors. They are not merely visual labels. For example, `flex` establishes a Flex formatting context for the element’s children, while `grid` establishes a Grid formatting context.

?

`flow-root` creates an independent formatting context

`flow-root` creates a block-level box that establishes a new block formatting context for its contents. It is therefore a layout model, not a synonym for ordinary `block`. The distinction matters when descendants would otherwise participate in the surrounding block formatting context.

?

`none` suppresses box generation

`display: none` causes the element and its descendants to generate no boxes. This is a box-generation decision, not merely a transparent or visually hidden state. Other CSS mechanisms such as visibility or opacity have different models and therefore belong to their own specifications and lessons.

?

Anonymous boxes can be generated

CSS layout sometimes requires boxes that do not correspond directly to an element in the document tree. These anonymous boxes allow formatting models to represent required layout structure. Authors generally reason about the boxes they generate, while the CSS specifications define when anonymous boxes are introduced.

?

Box generation and the document tree are different models

The document tree comes from the document structure. The CSS formatting box tree is generated from that structure and can differ because some elements generate no boxes, some elements generate principal boxes with particular inner/outer roles, and formatting models can require anonymous boxes. CSS layout therefore should not be described as a one-element-equals-one-box rule.

1
2
3

.card { display: block flow; }
.badge { display: inline flow-root; }
.panel { display: none; }

?

Reading order can follow the layout without changing layout

CSS Display Level 4 introduces `reading-flow` for block, flex, and grid containers. It lets the author define the order used for speech and linear sequential navigation when that order needs to track a visual layout. `reading-flow` does not change layout or painting; it changes the reading flow used by those sequential modes.

The `reading-order` property can then override the position of an individual direct child inside a reading-flow container. Lower integer groups are visited first. Keep the document source in its fundamental logical order: these properties are for components whose reading order genuinely needs to vary with layout, not a substitute for correcting the underlying markup.

?

`visibility: force-hidden` keeps the box model but hides the subtree

Display Level 4 also adds the developing `force-hidden` value to `visibility`. Unlike `hidden`, which can allow a visible descendant, `force-hidden` makes the generated boxes of the element and its descendants invisible regardless of their own `visibility` values. The boxes still exist for layout; this is different from `display: none`, which suppresses box generation.

?

Display is not a replacement for layout-specific lessons

Choosing `display: flex` does not teach the Flexbox algorithm, and choosing `display: grid` does not teach Grid track sizing or placement. Those algorithms belong to their respective lessons. Likewise, `display: block` establishes the relevant box role, while the Flow Layout lesson will explain how block and inline boxes actually participate in normal flow.

?

Specification boundary and maturity

CSS Display Level 3 is a Candidate Recommendation Draft dated 5 June 2026. CSS Display Level 4 is an Editor’s Draft dated 5 June 2026. Level 4 currently marks `display: run-in` and all multi-keyword `display` values at-risk, and its `reading-flow`, `reading-order`, and `visibility: force-hidden` additions are developing work. These additions are kept separate from stable fundamentals rather than silently treated as universal features.

Normative authorities: W3C CSS Display Module Level 3 and CSS Display Module Level 4.

Quick review

You should now be able to predict what kind of principal box an element generates, distinguish its outer and inner display roles, explain `none` versus visibility-based hiding, understand the developing reading-flow/reading-order model, and know which later lesson owns the actual layout algorithm.