= CSS used value
{c}
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.<CSS Cascading and Inheritance Level 5 by World Wide Web Consortium>[Value Processing, Used Values]{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.<CSS Box Sizing Module Level 3 by World Wide Web Consortium>[Preferred size, minimum/maximum sizes and box-sizing]{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.
Back to article page
