V čem se liší jednotky měření em od rem?

Jednotky em jsou relativní k velikosti písma rodičovského prvku. Pokud není velikost písma rodiče výslovně nastavena, používá se velikost jeho vlastního rodiče a tak dále až po kořenový prvek (html).

Jednotky rem jsou relativní pouze k velikosti písma kořenového prvku (html). To je činí předvídatelnějšími a zjednodušuje správu písem a velikostí prvků na stránce.

Příklad:

HTML:

<div class="parent">
  Text rodiče
  <div class="child-em">
    Text dítěte em
  </div>
  <div class="child-rem">
    Text dítěte rem
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Základní velikost písma pro rodiče */
}

.child-em {
  font-size: 1.5em; /* Velikost písma 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Základní velikost písma pro kořenový prvek */
}

.child-rem {
  font-size: 2rem; /* Velikost písma 2 * 10px = 20px */
}

Porovnávací tabulka:

Jednotka	Vztahuje se k	Předvídatelnost	Použití
em	Velikosti písma rodičovského prvku	Méně předvídatelné, závisí na kontextu	Pro odsazení a velikosti prvků závislé na textu uvnitř nich
rem	Velikosti písma kořenového prvku (html)	Předvídatelnější	Pro globální škálování písem, odsazení a velikosti prvků na stránce