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
|
---
title: Valeur calculée
slug: Web/CSS/computed_value
tags:
- CSS
- Reference
translation_of: Web/CSS/computed_value
original_slug: Web/CSS/Valeur_calculée
---
{{CSSRef}}
La **valeur calculée** d'une propriété CSS est calculée à partir de [la valeur définie](/fr/docs/Web/CSS/Valeur_spécifiée) :
1. En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
2. En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.
Les calculs utilisés pour obtenir la **valeur calculée** correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme `em` ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes `font-size: 16px` et `padding-top: 2em`. La valeur calculée de la propriété `padding-top` sera `32px` (on double la taille de la police).
Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme `width`, `margin-right`, `text-indent`, et `top`), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété `line-height` sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine [les valeurs utilisées](/fr/docs/Web/CSS/Valeur_utilisée).
Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de [la valeur spécifiée](/fr/docs/Web/CSS/Valeur_spécifiée) à [la valeur utilisée](/fr/docs/Web/CSS/Valeur_utilisée)) est [l'héritage](/fr/docs/Web/CSS/Héritage), notamment grâce au mot-clé {{cssxref("inherit")}}.
> **Note :** La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie [la valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue) qui correspond à la valeur calculée ou à [la valeur utilisée](/fr/docs/Web/CSS/Valeur_utilis%C3%A9e) selon la propriété.
## Spécifications
| Spécification | État | Commentaires |
| ------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
| {{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}} | {{Spec2("CSS2.2")}} | |
| {{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}} | {{Spec2("CSS2.1")}} | Définition initiale. |
## Voir aussi
- [La référence CSS](/fr/docs/Web/CSS/Reference)
- [La notion de valeur initiale](/fr/docs/Web/CSS/Valeur_initiale)
- [La notion de valeur définie](/fr/docs/Web/CSS/Valeur_spécifiée)
- [La notion de valeur calculée](/fr/docs/Web/CSS/Valeur_calculée)
- [La notion de valeur utilisée](/fr/docs/Web/CSS/Valeur_utilisée)
- [La notion de valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)
- [La notion de valeur réelle](/fr/docs/Web/CSS/valeur_reelle)
- {{cssxref("inherit")}}
- {{cssxref("initial")}}
- {{cssxref("unset")}}
- {{cssxref("revert")}}
- {{domxref("window.getComputedStyle")}}
|
