Codex @codex  0

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.^[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.^[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.

A CSS inline-block box participates as one unit in its parent's CSS inline formatting context while providing a CSS block container for its own contents. It can therefore sit beside text or other inline-level boxes while containing independently laid-out text and blocks. The outer and inner layout roles are separate.^[ref]

For example, two cards each have a CSS border box width of $80$ CSS pixels, zero margins and an intervening space that occupies $10$ pixels. Their combined width is $80+10+80=170$ pixels. They can share an available line width of $180$ pixels, but not $160$ pixels under these assumptions. Text inside either card can wrap within that card; the surrounding line treats the card as one unit instead of dividing it into several fragments.

Declaring display: inline-block; width: 80px also makes width applicable to an ordinary non-replaced element that would otherwise have generated an inline box. Check CSS box-sizing before deciding whether the eighty pixels describe its content or border dimensions.

CSS vertical alignment determines placement within the surrounding line. A gap beneath an inline-block can consequently concern baseline alignment rather than a mysterious extra margin. Source whitespace between cards can also occupy inline space. Diagnose these effects using the outer line layout and the card's internal CSS block formatting context separately.

A CSS inline box is the box generated by an inline CSS non-replaced element, such as a text element styled with display:inline. It participates in a CSS inline formatting context. When line breaking splits its content, fragments can occur on several CSS line boxes.^[ref]

For vertical line layout, its line-height and the CSS leading calculation determine its allocated extent. A child can contribute a taller box to the same CSS line box without changing the parent's own allocated height. For example, take a parent with line height 14 CSS pixels and baseline extents 10 above and 4 below. A child with line height 24 and extents 17 above and 7 below enlarges the enclosing line to 24 CSS pixels, assuming the CSS strut adds no greater extent. The parent's 14-CSS pixel allocation and the final 24-CSS pixel line describe different boxes.^[ref]

The height property does not supply a preferred height for a non-replaced CSS inline box; height:40px on such a text element therefore does not replace this line-layout calculation. The properties determining a CSS preferred size have different applicability from line-height.^[ref]

A CSS inline formatting context lays out inline-level content along lines. The generated CSS inline boxes and other inline-level items are arranged into CSS line boxes, whose widths depend on the available space and whose heights account for text metrics and vertical alignment.^[ref]

For a synthetic wrapping example, suppose three words each occupy 60 pixels and the spaces between them occupy ten. Two words need 130 pixels; all three need 200. With 140 pixels available and ordinary breaking opportunities at the spaces, two fit on the first line and the third moves to another. With 220 pixels available, all three can fit together.

One HTML element can then generate fragments on several lines. A styled span containing a long phrase need not correspond to one unbroken rectangular painted box. Conversely, an inline replaced image or a CSS inline-block box can participate as a single inline-level item whose own dimensions affect the line.

Vertical placement is handled within that context. CSS vertical alignment and text metrics can change a line's required extent even when its words and available horizontal width remain unchanged. The inline formatting context therefore combines line breaking with placement; knowing only the element tree or only the font size does not fully specify the result.

A CSS line box is the rectangular region containing the inline content of one line in a CSS inline formatting context. The browser fits successive inline content into lines, using line breaking when necessary, then uses CSS vertical alignment to determine each line's extent. A CSS inline box supplies one contribution to this enclosing region.^[ref]

For ordinary baseline-aligned text, the CSS leading calculation supplies each contribution's height $a_i$ above and depth $d_i$ below the text baseline. Include the CSS strut among those contributions. Enclosing them requiresFor example, extents $(a_1,d_1)=(10,4)$ and $(a_2,d_2)=(17,3)$ CSS pixels produce a line of $17+4=21$ CSS pixels, although the individual extents sum to 14 and 20. The largest upper extent and largest lower extent can come from different contributions. The CSS leading diagram illustrates the same geometry with another pair of hypothetical metrics.

A CSS replaced element, such as an inline image, contributes according to its CSS margin box; it need not follow the text's line height. Other settings of CSS vertical alignment require additional positioning rules. These effects explain why a line's final height can exceed the line-height declared on its surrounding CSS block container.^[ref]