Каква е разликата между единиците за измерване em и 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)	По-предсказуемо	За глобално мащабиране на шрифтове, отстъпи и размери на елементи на страницата