CSS used value

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.