Kā atšķiras mērvienības em no rem?

em vienības ir relatīvas attiecībā uz vecāka elementa fonta lielumu. Ja vecāka elementa fonta lielums nav tieši noteikts, tiek izmantots tā paša vecāka elementa fonta lielums, un tā tālāk līdz saknes elementam (html).

rem vienības ir relatīvas tikai saknes elementa (html) fonta lielumam. Tas padara tās paredzamākas un vienkāršo fontu un izmēru pārvaldību lapā.

Piemērs:

HTML:

<div class="parent">
  Vecāka teksta
  <div class="child-em">
    Bērna em teksts
  </div>
  <div class="child-rem">
    Bērna rem teksts
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Galvenais fonta lielums vecākam */
}

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

html {
  font-size: 10px; /* Galvenais fonta lielums saknes elementam */
}

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

Salīdzināšanas tabula:

Vienība	Attiecībā uz	Prognozējamība	Izmantošana
em	Vecāka elementa fonta lielums	Mazāk prognozējama, atkarīga no konteksta	Attālumu un izmēru, kas ir atkarīgi no iekšējā teksta, noteikšanai
rem	Saknes elementa (html) fonta lielums	Vairāk prognozējama	Globālas fontu, atstarpju un izmēru mērogošanai lapā