CSS Display

Updated 05 Oct 2026

•
What it is
- •
  controls an element's box participation in its surrounding layout and the layout of its children
•
Distinction
- •
  outer display describes participation, such as block or inline
- •
  inner display describes child layout, such as flow, flex, or grid
•
Example
- •
  an ordinary non-replaced inline box does not respond to width, height, and vertical margins like a block box.
- •
  inline-block participates inline while providing a box whose dimensions can be controlled.
- •
  inline-flex participates inline while laying out its children using flexbox.
- •
  display: contents removes the element’s principal box, not its DOM node; it can have semantic/accessibility implications.
•
Caution
- •
  display: block does not by itself create a new Block Formatting Context
•
Reference
- •
  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display
•

Linked references 3