Was ist der Unterschied zwischen den Maßeinheiten em und rem?

Die Einheiten em sind relativ zur Schriftgröße des Elternelements. Wenn die Schriftgröße des Elternteils nicht explizit festgelegt ist, wird die Schriftart seines eigenen Elternteils verwendet, und so weiter bis zum Wurzelelement (html).

Die Einheiten rem sind relativ zur Schriftgröße nur des Wurzelelements (html). Dies macht sie vorhersehbarer und vereinfacht die Verwaltung von Schriftarten und Größen auf der Seite.

Beispiel:

HTML:

<div class="parent">
  Elterntest
  <div class="child-em">
    Kindem-Text
  </div>
  <div class="child-rem">
    Kindrem-Text
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Grundgröße der Schriftart für den Elternteil */
}

.child-em {
  font-size: 1.5em; /* Schriftgröße 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Grundgröße der Schriftart für das Wurzelelement */
}

.child-rem {
  font-size: 2rem; /* Schriftgröße 2 * 10px = 20px */
}

Vergleichstabelle:

Einheit	Relativ zu was gemessen	Vorhersehbarkeit	Verwendung
em	Schriftgröße des Elternelements	Weniger vorhersehbar, abhängig vom Kontext	Für Abstände und Größen von Elementen, die vom Text innerhalb abhängen
rem	Schriftgröße des Wurzelelements (html)	Vorhersehbarer	Für globale Skalierung von Schriftarten, Abständen und Größen auf der Seite