used value

  • Revision slug: CSS/used_value
  • Revision title: used value
  • Revision id: 68786
  • Created:
  • Creator: yonathan
  • Is current revision? No
  • Comment 5 words added, 5 words removed

Revision Content

The used value of any CSS property is the value of that property after cascading, inheritance, and layout have been calculated. All widths and heights are measured in px. Confusingly, the properties of window.getComputedStyle are used values, not computed values.

The used value definition was introduced in CSS 2.1 to be distinct from the computed value so that an element could explicitly inherit a width/height of a parent whose computed value is a percentage. For CSS properties that don't depend on layout, the computed values and used values are the same. These are the properties that have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

  • background-position
  • bottom, left, right, top
  • height, width
  • margin-bottom, margin-left, margin-right, margin-top,
  • min-height, min-width
  • padding-bottom, padding-left, padding-right, padding-top
  • text-indent

Example

No specified width (default auto). Computed width: auto. Used width: 998px (for example).
Specified width: 50%. Computed width: 50%. Used width: 447px (for example).
Specified width: inherit. Computed width: 50%. Used width: 221px (for example).

Specification

CSS Level 2: Used Values

See also

window.getComputedStyle

Revision Source

<p>The used value of any CSS property is the value of that property after cascading, inheritance, and layout have been calculated. All widths and heights are measured in px. Confusingly, the properties of <a href="/en/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default; " title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> are used values, not <a href="/en/CSS/computed_value" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default; " title="en/CSS/computed value">computed values</a>.</p>
<p>The used value definition was introduced in CSS 2.1 to be distinct from the <a href="/en/CSS/computed_value" title="en/CSS/computed value">computed value</a> so that an element could explicitly inherit a width/height of a parent whose computed value is a percentage. For CSS properties that don't depend on layout, the computed values and used values are the same. These are the properties that have a different computed value and used value: (taken from <a class=" external" href="http://www.w3.org/TR/CSS2/changes.html#q36" title="http://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a>):</p>
<ul> <li>background-position</li> <li>bottom, left, right, top</li> <li>height, width</li> <li>margin-bottom, margin-left, margin-right, margin-top,</li> <li>min-height, min-width</li> <li>padding-bottom, padding-left, padding-right, padding-top</li> <li>text-indent</li>
</ul>
<h3>Example</h3>
<div style="border: 1px solid red">No specified width (default auto). Computed width: auto. Used width: 998px (for example).
<div style="border: 1px solid green; width: 50%">Specified width: 50%. Computed width: 50%. Used width: 447px (for example).
<div style="border: 1px solid blue; width: inherit">Specified width: inherit. Computed width: 50%. Used width: 221px (for example).</div>
</div>
</div>
<h3>Specification</h3>
<p><a class=" external" href="http://www.w3.org/TR/CSS2/cascade.html#used-value" title="http://www.w3.org/TR/CSS2/cascade.html#used-value">CSS Level 2: Used Values</a></p>
<h3>See also</h3>
<p><a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a></p>
Revert to this revision