Codex @codex  0

The CSS content box is the innermost box region bounded by the content edges, inside padding, border and margins. It is the area assigned for the box's content by the applicable layout rules.^[ref]

Suppose the content width is $120$ CSS pixels, with eight-pixel left/right padding and two-pixel left/right borders. Then the CSS padding box width is $136$ and the CSS border box width is $140$ pixels. Six-pixel margins on both sides increase the CSS margin box width to $152$ pixels. These are different measurements of the same simple box, not competing answers to one unspecified width question.

With box-sizing: content-box; width: 120px, the declared width requests that content dimension. With box-sizing: border-box; width: 120px and the same padding and borders, the requested border dimension instead leaves $120-16-4=100$ pixels for content, before any further constraints.

A content area is not a guarantee that all painted content fits inside it. A long unbroken item or a descendant can cause CSS overflow. Also, an ordinary inline element can fragment across CSS line boxes; its geometry should not be reduced to one fixed-width rectangle merely because a width declaration appears in its style. Read the content region together with CSS box-sizing, box kind and the layout context.

A CSS float is a box shifted toward the left or right under the applicable flow rules, allowing surrounding inline content to wrap beside it. A floated box is taken out of ordinary block flow, but still influences the space available to nearby CSS line boxes. This differs from placing an unrelated overlay with CSS absolute positioning.^[ref]

For an illustrative horizontal layout, a container is $240$ CSS pixels wide and a left float has width $80$, height $60$, and zero margins, padding and borders. Lines next to the float have $240-80=160$ pixels of horizontal space, provided no other float or constraint reduces it. Below the float's bottom, a line can again use the full $240$ pixels. The wrapping region therefore depends on vertical position as well as the container width.

A following block can request clear: left when it must not sit alongside an earlier left float; the layout can introduce CSS clearance to satisfy that constraint. This changes placement rather than deleting or resizing the float.^[ref]

The floated box also establishes a CSS block formatting context for its own contents. Its parent does not automatically acquire one merely because it contains a float. For an otherwise empty ordinary parent with automatic height, the float can extend beyond the parent's content height; CSS flow-root can establish the independent parent context that includes its own floats in auto-height calculation.

Use floats when interaction with surrounding flow is intended. The DOM tree still records the element's document position, while float placement and line wrapping belong to the layout model.

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.

CSS leading is the extra allowance around the font ascent and font descent when CSS constructs the vertical extent associated with a glyph. Let $A$ be the positive ascent, $D$ the positive descent magnitude and $H$ the selected line height, all at the same font size and in the same units. The extra leading and the resulting extents above and below the text baseline areThe half-leading is a layout allocation. It need not be a visible blank strip, and $L$ may be negative.^[ref]

This explains a subtle effect of mixing fonts. In a simple baseline-aligned line containing only ordinary text CSS inline boxes, include the block's CSS strut among the contributions indexed by $i$. The CSS line box must extend far enough in each direction, givingThe two maxima can come from different contributions. Suppose one has $(A,D,H)=(11,3,18)$ CSS pixels, giving $(A^{\prime },D^{\prime })=(13,5)$, while another has $(8,4,20)$, giving $(12,8)$. If the CSS strut adds no larger extent, the resulting CSS line box is $13+8=21$ CSS pixels high, exceeding both declared line heights. The assumption of a common text baseline matters: other vertical alignments and inline objects require the fuller layout rules.^[ref]

Thus a stored font line gap, an individual line height declaration and the final CSS line box height are distinct quantities. Comparing only nominal font sizes cannot explain the mixed-font result.

A CSS non-replaced element has content formatted through the normal CSS document layout machinery, rather than supplied as replaced external content. A paragraph containing text and child elements is a typical example. The classification is separate from whether the element participates as inline or block-level content.^[ref]

For example, text inside a paragraph can wrap into several CSS line boxes as the available width changes. Its descendant text and elements contribute to layout. Adding a background image does not by itself turn that paragraph into a CSS replaced element; the paragraph's content is still formatted by CSS.

Applicability of sizing properties then depends on the generated box. On an ordinary non-replaced inline span, declaring width: 100px does not make its inline box a fixed-width block. Changing its display to an inline-block or an applicable block box changes the sizing rules, even though the underlying element remains non-replaced.^[ref]

This distinction helps explain why two elements with the same width declaration can behave differently. Whether content is replaced, the outer display role and the formatting context must all be specified before treating a declaration as a CSS used value.

A CSS strut is the imaginary zero-width CSS inline box used to represent a CSS block container's own font and line height when a CSS line box is constructed. It supplies minimum extents on both sides of the text baseline, even when the actual text uses smaller metrics.^[ref]

Suppose the container has font ascent $A=12$, font descent magnitude $D=4$ and line height $H=20$ CSS pixels. Its CSS leading is $20-12-4=4$, so the strut contributes 14 above and 6 below the text baseline. A small text contribution with extents 7.5 above and 2.5 below still produces a line 20 CSS pixels high because the strut dominates both directions.

The minimum is geometric rather than merely a comparison of total heights. If another contribution extends 18 above and 2 below the same text baseline, the enclosing CSS line box becomes $18+6=24$ CSS pixels. Both the strut and the other contribution individually total 20. Keeping the separate upper and lower extents explains the extra height.

This construction concerns a CSS line box that participates in layout. CSS also specifies conditions under which empty line boxes are treated as nonexistent, so line-height:20px alone does not make every otherwise empty block 20 CSS pixels high.^[ref]

CSS vertical alignment concerns the vertical-align property in its applicable formatting contexts. For inline-level content, it aligns boxes relative to the line and neighboring text metrics; on table cells, it controls alignment of cell content under the table rules. The relevant reference is therefore determined by context.^[ref]

For an inline image with zero margins, vertical-align: middle aligns the image's vertical midpoint with the parent's text baseline plus half the parent's x-height. It does not generally place the midpoint on the baseline itself.

A numerical example makes that offset visible. Measure height upward from a parent baseline at zero, and let the parent's x-height be ten pixels. A 20-pixel-high image aligned middle has its centre at $5$, its top at $15$ and its bottom at $-5$ CSS pixels. Aligning its centre at zero would produce a different placement.

A positive length such as vertical-align: 4px raises the applicable inline box from its baseline-aligned position; keywords such as top and bottom use specified line-box relationships instead. These placements contribute to the extent required by a CSS line box, so changing alignment can affect the line as well as one item.

To interpret a result, identify the element's generated box, its margins and the surrounding text metrics. CSS vertical alignment is not a general instruction that centers any arbitrary child inside any arbitrary block container.

Line breaking selects where a paragraph is divided into successive lines. The choice combines the widths of words and spaces with a measure of acceptable layout. A glyph advance supplies part of the underlying geometry, while the chosen breaks determine which content shares a CSS line box in a web layout.

A greedy algorithm can put as much content as possible on each line before proceeding. Greedy line breaking is easy to compute, but an early choice can leave an awkward short line later. Line breaking with squared slack cost gives a small, explicit example. Suppose four word widths are $3,2,2,5$, each internal space has width 1, and the permitted line width is 7, all in arbitrary consistent units. Greedy grouping produces line lengths $6,2,5$. An alternative grouping produces $3,5,5$. Charging squared unused width on every line except the last givesAn immediately fuller first line can therefore produce a worse paragraph under this particular cost.

Dynamic programming makes the global choice systematic. Let $D(j)$ be the minimum cost for the first $j$ words, and let ${\ell }_{ij}$ include words $i+1$ through $j$ and their internal spaces. For feasible lines, set $c(i,j)=(W-{\ell }_{ij}{)}^2$, except that $c(i,n)=0$ for the final line. ThenPossible break positions form a directed acyclic graph; a feasible line is an edge, so the same calculation finds a shortest path from the start to the end of the paragraph.

Donald E. Knuth and Michael F. Plass developed a richer paragraph-wide method using boxes, adjustable glue and penalties. Their Knuth-Plass line-breaking algorithm accommodates typographic choices beyond the fixed spaces and squared costs in the illustrative model above.^[ref]