Kuo skiriasi matavimo vienetai em ir rem?

em vienetai yra santykiniai pagal tėvinio elemento šrifto dydį. Jei tėvinio elemento šrifto dydis nėra aiškiai nustatytas, naudojamas jo paties tėvinio šrifto dydis ir taip toliau iki šaknies elemento (html).

rem vienetai yra santykiniai tik pagal šaknies elemento (html) šrifto dydį. Tai daro juos labiau prognozuojamus ir supaprastina šriftų ir dydžių valdymą puslapyje.

Pavyzdys:

HTML:

<div class="parent">
  Tėvo tekstas
  <div class="child-em">
    Vaiko em tekstas
  </div>
  <div class="child-rem">
    Vaiko rem tekstas
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Pagrindinis šrifto dydis tėvui */
}

.child-em {
  font-size: 1.5em; /* Šrifto dydis 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Pagrindinis šrifto dydis šaknies elementui */
}

.child-rem {
  font-size: 2rem; /* Šrifto dydis 2 * 10px = 20px */
}

Lyginamoji lentelė:

Vienetas	Santykinai matuojama	Prognozuojamumas	Naudojimas
em	Tėvinio elemento šrifto dydis	Mažiau prognozuojamas, priklauso nuo konteksto	Tarpų ir dydžių, priklausančių nuo viduje esančio teksto
rem	Šaknies elemento (html) šrifto dydis	Daugiau prognozuojamas	Pasaulinio masto šriftų, tarpų ir dydžių keitimas puslapyje