Computed value
The computed value of a CSS property is the value that is transferred from parent to child during inheritance. It is calculated from the specified value by:
- Handling the special values
inherit
,initial
,unset
, andrevert
. - Doing the computation needed to reach the value described in the "Computed value" line in the property's definition table.
The computation needed to reach a property's computed value typically involves converting relative values (such as those in em
units or percentages) to absolute values. For example, if an element has specified values font-size: 16px
and padding-top: 2em
, then the computed value of padding-top
is 32px
(double the font size).
However, for some properties (those where percentages are relative to something that may require layout to determine, such as width
, margin-right
, text-indent
, and top
), percentage-specified values turn into percentage-computed values. Additionally, unitless numbers specified on the line-height
property become the computed value, as specified. The relative values that remain in the computed value become absolute when the used value is determined.
Note: The getComputedStyle()
DOM API returns the resolved value, which may either be the computed value or the used value, depending on the property.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 2) The definition of 'computed-value' in that specification. | Working Draft | No change. |
CSS Level 2 (Revision 1) The definition of 'computed value' in that specification. | Recommendation | Initial definition. |
See also
window.getComputedStyle
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value