Computed value

{{CSSRef}} 

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:

1. Handling the special values {{cssxref("inherit")}} , {{cssxref("initial")}} , {{cssxref("revert")}} , {{cssxref("revert-layer")}} , and {{cssxref("unset")}} .
2. 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 {{domxref("Window.getComputedStyle", "getComputedStyle()")}}  DOM API returns the resolved value, which may either be the computed value or the used value, depending on the property.

Specifications

{{Specifications}} 

See also

• {{domxref("window.getComputedStyle")}} 
• CSS key concepts:
  • CSS syntax
  • At-rules
  • Comments
  • Specificity
  • Inheritance
  • Box model
  • Layout modes
  • Visual formatting models
  • Margin collapsing
  • Values
    • Initial values
    • Used values
    • Resolved values
    • Actual values
  • Value definition syntax
  • Shorthand properties
  • Replaced elements