Mi a különbség az em és rem mértékegységek között?

Az em egységek a szülő elem betűméretéhez viszonyítva vannak. Ha a szülő betűmérete nincs kifejezetten beállítva, akkor a saját szülőjének betűméretét használja, és így tovább egészen a gyökérelemig (html).

A rem egységek csak a gyökérelem (html) betűméretéhez viszonyítva vannak. Ezáltal jobban előre jelezhetővé válnak, és egyszerűbbé teszik a betűtípusok és méretek kezelését az oldalon.

Példa:

HTML:

<div class="parent">
  Szülő szöveg
  <div class="child-em">
    Gyerek em szöveg
  </div>
  <div class="child-rem">
    Gyerek rem szöveg
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Alapértelmezett betűméret a szülő számára */
}

.child-em {
  font-size: 1.5em; /* Betűméret 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Alapértelmezett betűméret a gyökérelem számára */
}

.child-rem {
  font-size: 2rem; /* Betűméret 2 * 10px = 20px */
}

Összehasonlító táblázat:

Egység	Mivel viszonyítva mérjük	Előrejelezhetőség	Használat
em	A szülő elem betűmérete	Kevésbé előre jelezhető, a kontextustól függ	A belső szövegtől függő margók és méretek esetén
rem	A gyökérelem (html) betűmérete	Jobban előre jelezhető	Globális betűtípus, margók és méretek skálázására az oldalon