Czym różnią się jednostki miary em od jednostek rem?

Jednostki em są względne do rozmiaru czcionki elementu nadrzędnego. Jeśli rozmiar czcionki nadrzędnego elementu nie jest jawnie ustawiony, używany jest rozmiar czcionki jego własnego nadrzędnego elementu i tak dalej aż do elementu głównego (html).

Jednostki rem są względne do rozmiaru czcionki tylko elementu głównego (html). To czyni je bardziej przewidywalnymi i upraszcza zarządzanie czcionkami i rozmiarami elementów na stronie.

Przykład:

HTML:

<div class="parent">
  Tekst rodzica
  <div class="child-em">
    Tekst dziecka em
  </div>
  <div class="child-rem">
    Tekst dziecka rem
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Podstawowy rozmiar czcionki dla rodzica */
}

.child-em {
  font-size: 1.5em; /* Rozmiar czcionki 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Podstawowy rozmiar czcionki dla elementu głównego */
}

.child-rem {
  font-size: 2rem; /* Rozmiar czcionki 2 * 10px = 20px */
}

Tabela porównawcza:

Jednostka	W odniesieniu do czego jest mierzona	Przewidywalność	Zastosowanie
em	Rozmiar czcionki elementu nadrzędnego	Mniej przewidywalne, zależy od kontekstu	Do marginesów i rozmiarów elementów zależnych od tekstu wewnątrz nich
rem	Rozmiar czcionki elementu głównego (html)	Bardziej przewidywalne	Do globalnego skalowania czcionek, marginesów i rozmiarów elementów na stronie