= CSS computed value
{c}
A <CSS computed value> is the result of processing a property's specified value as far as possible without performing the layout-dependent calculations reserved for later stages. Computation resolves details such as inheritance and many relative units; the exact rule belongs to each <CSS property>.<CSS Cascading and Inheritance Level 5 by World Wide Web Consortium>[Value Processing, Computed Values]{ref}
For example, if a parent has a computed font size of 20 <CSS pixels> and its child specifies `font-size: 150%`, the child's computed size is 30 pixels. A descendant inheriting that font size receives the computed result, rather than the original percentage expression.
Not every relative expression disappears at this stage. A percentage width can remain a percentage until the containing width is known. Similarly, a unitless `line-height: 1.5` computes as a number under that property's definition; when inherited by text with a 24-pixel font size, it can yield a 36-pixel used line height. Copying the parent's final pixel height would be a different operation.<CSS Cascading and Inheritance Level 5 by World Wide Web Consortium>[Computed Values and Inheritance]{ref}<Visual formatting model details in CSS 2.2 by W3C>[§10.8, unitless line-height]{ref}
The computed stage therefore supplies a stable representation for inheritance without promising that every value is a final numeric measurement. To turn it into a <CSS used value>, the formatter can still need containing dimensions, content measurements and the relevant box-layout algorithm.
Back to article page
