Quelle est la différence entre les unités de mesure em et rem?

Les unités em sont relatives à la taille de la police de l'élément parent. Si la taille de la police du parent n'est pas explicitement définie, elle utilise la police de son propre parent, et ainsi de suite jusqu'à l'élément racine (html).

Les unités rem sont relatives à la taille de la police uniquement de l'élément racine (html). Cela les rend plus prévisibles et facilite la gestion des polices et des tailles d'éléments sur la page.

Exemple:

HTML:

<div class="parent">
  Texte du parent
  <div class="child-em">
    Texte enfant em
  </div>
  <div class="child-rem">
    Texte enfant rem
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Taille de police de base pour le parent */
}

.child-em {
  font-size: 1.5em; /* Taille de police 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Taille de police de base pour l'élément racine */
}

.child-rem {
  font-size: 2rem; /* Taille de police 2 * 10px = 20px */
}

Tableau comparatif:

Unité	Par rapport à quoi elle est mesurée	Prévisibilité	Utilisation
em	Taille de la police de l'élément parent	Moins prévisible, dépend du contexte	Pour marges et tailles d'éléments dépendant du texte à l'intérieur
rem	Taille de la police de l'élément racine (html)	Plus prévisible	Pour le redimensionnement global des polices, marges et tailles d'éléments sur la page