En CSS, em et rem sont des unités de mesure relatives utilisées pour définir les dimensions et les espaces dans une mise en page web. Cependant, elles se basent sur des références différentes :

• em est relatif à la taille de police de l'élément courant ou parent.
• rem est relatif à la taille de police de l'élément racine (html).

Plus précisément :

• em : Cette unité est relative à la taille de police de l'élément courant ou parent. Si aucune taille de police n'est définie pour l'élément courant, il hérite de la taille de police de son parent. Par exemple, si la taille de police de l'élément parent est de 16px, alors 1em sera égal à 16px pour cet élément. De ce fait, si vous définissez une taille de police à 2em pour un élément enfant, sa taille de police sera deux fois plus grande que celle de son parent.

• rem : Cette unité est relative à la taille de police de l'élément racine (html). Dans la plupart des navigateurs, la taille de police par défaut de l'élément racine est de 16px. Ainsi, 1rem est toujours égal à 16px, sauf si vous modifiez explicitement la taille de police de l'élément racine. L'avantage de rem est qu'il permet d'avoir une taille de police cohérente et basée sur une seule référence, ce qui facilite la gestion des dimensions dans une mise en page.

En résumé, em est relatif à la taille de police de l'élément parent, tandis que rem est relatif à la taille de police de l'élément racine (html). Le choix entre ces deux unités dépend de la manière dont vous souhaitez gérer les dimensions et les espaces dans votre mise en page web.

Voici un exemple en ligne qui illustre bien la différence entre em et rem. On constate que dans le cas des élément em le texte est deux fois plus gros que le parent. En revanche, avec rem, le texte est deux fois plus grand que l'élément racine.