Computed value

  • Revision slug: CSS/computed_value
  • Revision title: Computed value
  • Revision id: 352977
  • Created:
  • Creator: trevorh
  • Is current revision? No
  • Comment Revert to revision of 2012-10-01 20:10:15 by FredB

Revision Content

Summary

The computed value of a CSS property is computed from the specified value by:

  • handling the special values {{ cssxref("inherit") }} and {{ cssxref("initial") }}, and
  • doing the computation needed to reach the value described in the "Computed value" line in the property's summary.

The computation needed to reach the "Computed value" for the property 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. These relative values that remain in the computed value become absolute when the used value is determined.

The main use of the computed value (other than as a step between the specified value and used value) is inheritance, including the {{ cssxref("inherit") }} keyword.

Notes

The getComputedStyle DOM API returns the used value, not the computed value.

Specifications

See also

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>computed value</strong> of a CSS property is computed from the specified value by:</p>
<ul>
  <li>handling the special values {{ cssxref("inherit") }} and {{ cssxref("initial") }}, and</li>
  <li>doing the computation needed to reach the value described in the "Computed value" line in the property's summary.</li>
</ul>
<p>The computation needed to reach the "Computed value" for the property typically involves converting relative values (such as those in<code> em </code>units or percentages) to absolute values.</p>
<p>For example, if an element has specified values<code> font-size:16px </code>and<code> padding-top:2em</code>, then the computed value of<code> padding-top </code>is<code> 32px </code>(double the font size).</p>
<p>However, for some properties (those where percentages are relative to something that may require layout to determine, such as<code> width</code>,<code> margin-right</code>,<code> text-indent</code>, and<code> top</code>), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the<code> line-height </code>property become the computed value, as specified. These relative values that remain in the computed value become absolute when the <a href="/en-US/docs/CSS/used_value" title="en/CSS/used_value">used value</a> is determined.</p>
<p>The main use of the <em>computed value</em> (other than as a step between the <a href="/en-US/docs/CSS/specified_value" title="en/CSS/specified_value">specified value</a> and <a href="/en-US/docs/CSS/used_value" title="en/CSS/used_value">used value</a>) is <a class="internal" href="/en-US/docs/CSS/inheritance" title="en/CSS/inheritance">inheritance</a>, including the {{ cssxref("inherit") }} keyword.</p>
<h2 id="Notes">Notes</h2>
<p>The <a href="/en-US/docs/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">getComputedStyle</a> DOM API returns the <a href="/en-US/docs/CSS/used_value" title="en/CSS/used_value">used value</a>, not the <a href="/en-US/docs/CSS/computed_value" title="en/CSS/computed_value">computed value</a>.</p>
<h2 id="Specifications">Specifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#computed-value%20" title="http://www.w3.org/TR/CSS21/cascade.html#computed-value ">CSS 21 Assigning property values #computed-value </a></li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
  <li>{{ CSS_key_concepts() }}</li>
</ul>
Revert to this revision