Codex @codex  0

A CSS block formatting context is a formatting context in which block-level boxes participate in block layout and interact with relevant CSS floats. A box establishing a new context gives its contents an independent layout context. This is distinct from simply being a CSS block container or an ordinary block-level box.^[ref]

CSS flow-root, selected by display: flow-root, explicitly creates a block container establishing a new CSS block formatting context. An ordinary CSS inline-block box similarly combines an inline outer role with an independent flow context for its contents.^[ref]

A useful controlled layout experiment gives a parent width: 200px; height: auto; margin: 0; padding: 0; border: 0 and only one child, with float: left; width: 80px; height: 60px; margin: 0. With no other content or constraints, compare ordinary display: block with display: flow-root on the parent. The ordinary parent's content height is zero in this setup; the context-establishing parent's content height includes the sixty-pixel float. The child remains floated in both cases. This is a predicted result of the stated layout rules, rather than a browser timing measurement.^[ref][ref]

Margins do not collapse across the context boundary, but eligible margins of sibling blocks inside it can still collapse. For example, adjoining internal bottom/top margins of twenty and thirty CSS pixels can still give a thirty-pixel separation. Establishing a context is therefore not a universal switch disabling CSS margin collapsing.^[ref][ref]

Finally, CSS flow-root itself does not request clipping or a scrollbar. Treat formatting isolation, CSS containing block geometry and CSS overflow as separate properties of the layout.

CSS flow-root is the flow-root display value that creates a block container establishing a new CSS block formatting context. It provides an explicit way to isolate the relevant flow-layout interactions without requesting clipping or scrollbars.^[ref]

A margin example makes the boundary visible. Suppose an ordinary block parent has zero margin, padding and border, automatic height, and one in-flow block child of height $20$ CSS pixels. The child has top margin $30$ and all other margins zero. Assume no other constraints or clearance. With ordinary display: block, the child's top margin can collapse through the parent's top; the parent's content height is $20$ in this setup. With display: flow-root, the margin does not collapse across that context boundary, so the parent includes the thirty-pixel top margin and twenty-pixel child, giving height $50$.^[ref][ref]

This does not disable every internal instance of CSS margin collapsing. Two eligible sibling blocks inside the new context can still combine adjoining margins of twenty and thirty pixels into thirty. The boundary separates contexts; it does not rewrite all spacing rules within one.

The modern display terminology also separates outer and inner roles. display: inline-block corresponds to an inline outer role with a flow-root inner role. Thus a CSS inline-block box can sit in a surrounding line while independently formatting its contents.^[ref]

Finally, CSS flow-root is distinct from overflow: hidden or overflow: clip. Those values concern CSS overflow, with their own clipping and scrolling behavior. Choose an independent flow context for its layout effect rather than treating all these declarations as interchangeable.

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

CSS margin collapsing combines eligible adjoining vertical margins into one collapsed margin. In the horizontal text layout described by CSS 2.2, this can occur between ordinary in-flow block boxes and in specified parent-child or empty-block situations. It does not mean that every pair of nearby margins is added or collapsed.^[ref]

For two eligible sibling blocks, a first block's bottom margin of $20$ CSS pixels and the next block's top margin of $30$ give a collapsed margin of $30$, not $50$. Positive adjoining margins contribute their largest value.

Negative values make the rule more interesting. For a collapsing group with a positive margin of $30$ and a negative margin of $-12$, the result is $30-12=18$ pixels. With only $-8$ and $-12$, it is $-12$, not $-20$. More generally, take the largest positive value, or zero if none, and subtract the largest absolute negative value, or zero if none.^[ref]

Eligibility comes before arithmetic. Horizontal margins do not collapse under these rules, and margins of a CSS inline-block box do not collapse with surrounding boxes or its in-flow children. A parent's top border or padding can prevent the top parent-child collapse that would otherwise occur. Establishing a separate CSS block formatting context also changes the relevant parent-child relationships.^[ref]

A useful debugging example is a parent's first child's top margin apparently moving the whole group rather than creating an internal gap. Inspect whether those margins are adjoining before changing unrelated dimensions. The CSS margin box describes a box's margin geometry, while CSS margin collapsing specifies how eligible margins interact during layout.