Héritage par défaut

modifier

La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.

Héritage explicite

modifier

La valeur spéciale inherit permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.

Exemple 1 : L'élément <div> interne hérite de la bordure de l'élément externe.

<div style="border: solid 1px; padding: 1em;">
EXTERNE
<div style="border: inherit; padding: 1em;">
INTERNE
</div>
</div>

EXTERNE

INTERNE

Exemple 2 : L'élément <div> interne hérite de l'absence de bordure de l'élément intermédiaire car celui-ci n'hérite pas de la bordure de l'élément externe.

<div style="border: solid 1px; padding: 1em;">
EXTERNE
<div>
<div style="border: inherit; padding: 1em;">
INTERNE
</div>
</div>
</div>

EXTERNE

INTERNE