Kuidas erinevad mõõtühikud em ja rem?

em ühikud on suhtelised vanemelemendi fondi suurusega. Kui vanemelemendi fondi suurus ei ole selgelt määratud, kasutatakse selle enda vanemelemendi fondi suurust ja nii edasi kuni juurelemendini (html).

rem ühikud on suhtelised ainult juurelemendi (html) fondi suurusega. See muudab need prognoositavamaks ja lihtsustab fondide ja suuruste haldamist lehel.

Näide:

HTML:

<div class="parent">
  Vanema tekst
  <div class="child-em">
    Lapse em tekst
  </div>
  <div class="child-rem">
    Lapse rem tekst
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Põhifondi suurus vanemale */
}

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

html {
  font-size: 10px; /* Põhifondi suurus juurelemendile */
}

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

Võrdlustabel:

Ühik	Mõõdetakse	Prognoositavus	Kasutus
em	Vanemelemendi fondi suurus	Vähem prognoositav, sõltub kontekstist	Sisemiste tekstide ja vahede suuruse määramiseks
rem	Juureelemendi (html) fondi suurus	Rohkem prognoositav	Globaalne fondi, vahede ja suuruste skaleerimine lehel