1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
---
title: Valor Computado
slug: Web/CSS/valor_computado
tags:
- CSS
- Guía
- Iniciante
- Web
translation_of: Web/CSS/computed_value
---
<div>{{cssref}}</div>
<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 <strong>computed value</strong> 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">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/Web/CSS/specified_value">specified value</a> and <a href="/en-US/docs/Web/CSS/used_value">used value</a>) is <a class="internal" href="/en-US/docs/Web/CSS/inheritance">inheritance</a>, including the {{cssxref("inherit")}} keyword.</p>
<h2 id="Notas">Notas</h2>
<p>The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the {{cssxref("resolved_value", "resolved value")}}, which may either be the {{cssxref("computed_value", "computed value")}} or the {{cssxref("used_value", "used value")}}, depending on the property.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Especificação inicial</td>
</tr>
</tbody>
</table>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li>
<li>{{CSS_key_concepts}}</li>
</ul>
|
