= CSS block container
{c}
A <CSS block container> is a box whose contents are laid out as block-level boxes or in an <CSS inline formatting context>, under the ordinary flow rules. The term describes how the box contains its contents, which is different from whether the box itself participates as a block-level or inline-level item in its parent.<Visual formatting model in CSS 2.2 by W3C>[§9.2.1, distinction between block-level and block-container boxes]{ref}
A normal non-replaced div can contain paragraphs arranged as blocks. An inline-block can also be a block container, although it participates as an inline-level item outside. For example, two inline-block cards can sit beside each other in a line while each card contains its own block paragraphs. Their internal layout and external placement answer different questions.
For mixed ordinary content, the formatting rules can generate anonymous block boxes to organize inline runs around block-level children. These generated boxes are part of layout rather than additional <DOM nodes>. Inspecting the document tree alone therefore does not list every box used by the formatter.<Visual formatting model in CSS 2.2 by W3C>[§9.2.1.1, Anonymous block boxes]{ref}
Likewise, an element being displayed as a block is not sufficient to establish that its replaced content becomes an ordinary block-container layout. State the box's content model, whether it is replaced, and its inner and outer formatting roles. This keeps the terms block, container and inline from being treated as interchangeable labels.
Back to article page
