rem и em — это относительные единицы измерения в CSS, которые используются для задания размеров, но отличаются базой отсчёта.

em — относительная единица, основанная на размере шрифта родительского элемента. Например, если у родителя font-size: 16px, то 1em = 16px. Если у дочернего элемента font-size: 1.5em, то его размер будет 24px.
rem — относительная единица, основанная на размере шрифта корневого элемента (обычно <html>). Например, если у <html> font-size: 16px, то 1rem всегда равен 16px, независимо от вложенности.

Основное отличие:

em зависит от контекста (родителя), что может приводить к каскадному умножению размеров при вложенности.
rem всегда фиксирован относительно корня, что упрощает управление размерами и делает их более предсказуемыми.

Пример:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px внутри .parent */
}

.child-em {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

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

Используйте rem для глобальных размеров, чтобы избежать неожиданных изменений, а em — когда нужно масштабировать относительно локального контекста.

Чем rem от em отличаются?