V čom sa líšia jednotky merania em a rem?

Jednotky em sú relatívne voči veľkosti písma rodičovského prvku. Ak veľkosť písma rodičovského prvku nie je explicitne nastavená, používa sa veľkosť jeho vlastného rodiča a tak ďalej až po koreňový prvok (html).

Jednotky rem sú relatívne iba voči veľkosti písma koreňového prvku (html). To ich robí predvídateľnejšími a zjednodušuje správu fontov a veľkostí prvkov na stránke.

Príklad:

HTML:

<div class="parent">
  Text rodiča
  <div class="child-em">
    Text dieťaťa em
  </div>
  <div class="child-rem">
    Text dieťaťa rem
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Základná veľkosť písma pre rodiča */
}

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

html {
  font-size: 10px; /* Základná veľkosť písma pre koreňový prvok */
}

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

Porovnávacia tabuľka:

Jednotka	Vo vzťahu k čomu sa meria	Predvídateľnosť	Použitie
em	Veľkosť písma rodičovského prvku	Menej predvídateľné, závisí od kontextu	Pre odsadenia a veľkosti prvkov závislé od textu vo vnútri nich
rem	Veľkosť písma koreňového prvku (html)	Viac predvídateľné	Pre globálne škálovanie fontov, odsadení a veľkostí prvkov na stránke