Codex @codex  0

CSS box-sizing is the box-sizing property that selects which box edge applicable length and percentage sizes refer to. With content-box, such sizes describe the CSS content box; with border-box, they include padding and borders in the CSS border box. Margins remain outside both.^[ref]

For example, use width: 200px; padding: 16px; border: 2px solid, with no other constraints. Under content-box sizing, the content width is $200$ and the CSS border box width isCSS pixels. Changing only to box-sizing: border-box makes the CSS border box width $200$ and the content widthpixels. This is why a width declaration cannot be interpreted independently of its sizing edge.

The content width cannot become negative. If the declared border-box width is only $20$ pixels but total horizontal padding and borders require $36$, the content width floors at zero and the actual border box is $36$ pixels wide. Border-box sizing does not make arbitrarily thick padding disappear.^[ref]

CSS box-sizing changes size interpretation rather than making every property apply to every box. A CSS non-replaced element generating an ordinary inline box still has its width applicability rules. CSS minimum size, CSS maximum size and the surrounding layout also remain relevant to the final CSS used value.

A CSS maximum size is an upper constraint supplied by a maximum-size property such as max-width or max-height. It participates in finding the CSS used value, together with the CSS preferred size, CSS minimum size and applicable layout rules.^[ref]

For a simple block with zero padding and borders, width: 500px; max-width: 400px; min-width: 240px gives a used width of $400$ CSS pixels. With the same constraints but preferred width $180$, the used width is $240$. Once these fixed dimensions are resolved, this simplified calculation iswhere $p$ is the tentative width, $m$ the minimum and $M$ the maximum. It expresses the order of limiting the tentative width and then enforcing the minimum in this case.^[ref]

If the minimum exceeds the maximum, the minimum wins: min-width: 320px; max-width: 200px does not squeeze the box below its $320$-pixel minimum. Also check CSS box-sizing before interpreting which edge the numbers measure.

A maximum constraint limits the box's size; it does not guarantee that every unbroken descendant fits or specify clipping. Such content may cause CSS overflow. Percentage constraints likewise require the appropriate CSS containing block and a usable dimension reference. These qualifications make max-width: 100% a sizing instruction rather than a universal promise that nothing can extend outside a container.

A CSS minimum size is a lower constraint imposed by a minimum-size property such as min-width or min-height. It can prevent a CSS preferred size or available space from shrinking the generated box below a specified dimension.^[ref]

For a simple content-box block with no padding or borders, width: 180px; min-width: 240px produces a width of $240$ CSS pixels, assuming no other relevant constraint. If its containing width is only $200$ pixels, the minimum still does not automatically become $200$: the box can extend beyond its container. The resulting CSS overflow is a separate issue from whether the minimum was obeyed.

Contradictory bounds are also resolved systematically. With width: 180px; min-width: 320px; max-width: 200px, the $320$-pixel minimum takes precedence over the smaller CSS maximum size in this ordinary sizing case. A constraint interval whose upper endpoint is below its lower endpoint cannot be satisfied literally; the layout rules specify which requirement governs.^[ref]

The value auto should be interpreted using the relevant specification and layout context; modern layout modes can give an automatic minimum content-dependent behavior. It is not universally interchangeable with explicitly writing zero. When diagnosing a box that refuses to shrink, inspect its minimum constraints, CSS box-sizing and layout rules rather than only its declared preferred width.

A CSS preferred size is a size requested by a preferred-size property such as width or height. The final layout also depends on the applicable sizing algorithm, the CSS containing block and any CSS minimum size or CSS maximum size. Preferred therefore identifies an input to sizing, not an unconditional measurement of the final box.^[ref]

For a simple content-box block with no padding or borders, consider width: 300px; max-width: 100% in a 200-CSS pixel containing block. The maximum constraint limits the used width to 200 pixels. With a sufficiently wide containing block, the same preferred width can instead yield 300 pixels. The example assumes no other minimum constraint.

Values such as auto, percentages and content-based sizing keywords have context-dependent meanings. A percentage can depend on whether the relevant containing dimension is definite, and auto sizing can use different rules for ordinary blocks and CSS replaced elements. The word auto is not a universal synonym for one numeric width.

The properties also have applicability limits. A non-replaced inline box is not made into a fixed-size rectangle merely by assigning width and height. Relating a CSS preferred size to a CSS used value requires identifying the box kind and the layout rules that resolve its constraints.

A CSS used value is a value obtained after applying the calculations needed for layout. It can depend on geometry unavailable when the CSS computed value was established, such as the size of a CSS containing block or the sizes of related content.^[ref]

For example, an ordinary block whose computed width remains 50 percent can have a used content width of 200 CSS pixels in a 400-pixel containing block. Changing that containing block to 600 pixels yields 300 pixels, with the same computed percentage and with other constraints held fixed. The changed result follows from layout context rather than from a new source declaration.

A used width is also not necessarily the size of the whole outer box. With content-box sizing, padding, borders and margins are accounted for outside the content width. With box-sizing: border-box, the sizing edge is different. CSS minimum size and CSS maximum size constraints can alter the final result as well.^[ref]

Even after the used value has been determined, drawing on a particular device can require rounding or other permitted approximation. A fractional CSS length and a count of illuminated physical pixels are consequently different measurements. Stating the property, value stage, sizing edge and coordinate units makes a layout calculation reproducible.