Quelle est la différence entre rem et em en CSS ?

Différencier rem d'em en CSS

En CSS, les tailles de police peuvent être définies à l'aide de différentes unités, parmi lesquelles rem et em sont couramment rencontrés . Bien que les deux unités servent à définir des tailles de police relatives, elles diffèrent sur un aspect crucial : leur point de référence relatif.

Comprendre em

L'unité em est relative à la taille de la police de son élément parent. Cela signifie que si l'élément parent a une taille de police de 14 px, l'élément enfant avec une taille de police de 1,4 em aura une taille de police de 1,4 * 14 px = 19,6 px.

Comprendre rem

En revanche, l'unité rem est relative à une taille de police de base. Cette taille de police de base est généralement définie dans le champ élément ou via une variable CSS. Si la taille de police de base est définie sur 16 px, toutes les valeurs rem seront calculées par rapport à cette taille. Par conséquent, l'élément enfant avec une taille de police de 1,4rem dans notre exemple aura une taille de police de 1,4 * 16px = 22,4px.

Impact sur les éléments imbriqués

Cette distinction devient significative lorsqu'il s'agit de conteneurs imbriqués qui modifient la taille de leur police. Les éléments enfants définis dans ems hériteront de la taille de police modifiée de leur parent, tandis que ceux définis dans rems conserveront leur taille relative par rapport à la taille de police de base.

Exemple

Dans l'extrait de code fourni :

<code class="html"><div>Hello <p>World</p></div></code>

<code class="css">div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}</code>

La taille de la police du