Чем единицы измерения em отличаются от единиц измерения rem?

Единицы em являются относительными по отношению к размеру шрифта родительского элемента. Если размер шрифта родителя не задан явно, используется шрифт его собственного родителя и так далее до корневого элемента (html).

Единицы rem являются относительными по отношению к размеру шрифта только корневого элемента (html). Это делает их более предсказуемыми и упрощает управление шрифтами и размерами элементов на странице.

Пример:

HTML:

<div class="parent">
  Parent text
  <div class="child-em">
    Child em text
  </div>
  <div class="child-rem">
    Child rem text
  </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 */
}

Таблица сравнения: