Wat is het verschil tussen de eenheden em en rem?

De eenheden em zijn relatief ten opzichte van de lettergrootte van het bovenliggende element. Als de lettergrootte van het bovenliggende element niet expliciet is ingesteld, wordt de lettergrootte van zijn eigen bovenliggende element gebruikt, en zo verder tot het root-element (html).

De eenheden rem zijn relatief tot de lettergrootte van alleen het root-element (html). Dit maakt ze voorspelbaarder en vereenvoudigt het beheer van lettertypen en groottes van elementen op de pagina.

Voorbeeld:

HTML:

<div class="parent">
  Ouder tekst
  <div class="child-em">
    Kind em tekst
  </div>
  <div class="child-rem">
    Kind rem tekst
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Basis lettergrootte voor de ouder */
}

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

html {
  font-size: 10px; /* Basis lettergrootte voor het root-element */
}

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

Vergelijkingstabel:

Eenheid	Relatief tot wat wordt gemeten	Voorspelbaarheid	Gebruik
em	Lettergrootte van het bovenliggende element	Minder voorspelbaar, afhankelijk van de context	Voor marges en groottes van elementen die afhankelijk zijn van de tekst binnenin
rem	Lettergrootte van het root-element (html)	Meer voorspelbaar	Voor wereldwijde schaalverdeling van lettertypen, marges en groottes op de pagina