Čime se razlikuju jedinice mere em od rem?

Јединице em су релативне у односу на величину фонта родитељског елемента. Ако величина фонта родитељског елемента није експлицитно постављена, користи се фонта његовог сопственог родитеља и тако даље до коренског елемента (html).

Јединице rem су релативне у односу само на величину фонта коренског елемента (html). Ово их чини предвидљивијим и поједностављује управљање фонтовима и величинама елемената на страници.

Пример:

HTML:

<div class="parent">
  Текст родитеља
  <div class="child-em">
    Текст детета em
  </div>
  <div class="child-rem">
    Текст детета rem
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Основна величина фонта за родитеља */
}

.child-em {
  font-size: 1.5em; /* Величина фонта 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Основна величина фонта за коренски елемент */
}

.child-rem {
  font-size: 2rem; /* Величина фонта 2 * 10px = 20px */
}

Упоредна табела:

Јединица	У односу на шта се мери	Предвидљивост	Коришћење
em	Величина фонта родитељског елемента	Мање предвидљиво, зависи од контекста	За размаке и величине елемената који зависе од текста унутар њих
rem	Величина фонта коренског елемента (html)	Више предвидљиво	За глобално скалирање фонти, размаке и величине елемената на страници