От чего зависит единица EM — от ближайшего REM или от родительского font-size?

Что такое em и от чего он зависит

Единица em в CSS — это относительная единица измерения, которая вычисляется на основе font-size текущего элемента. Однако если у самого элемента font-size не задан, то em наследуется от родительского элемента. Это ключевое отличие от rem, который всегда зависит от корневого элемента (html).

Например, если у родительского блока задано font-size: 20px, то у дочернего элемента 1em будет равен 20px, 2em — 40px и так далее. Если родительский font-size не указан, браузер использует значение по умолчанию (обычно 16px), и em будет равен 16px.

Практический пример

/* HTML */
<div class="parent">
  <p class="child">Текст</p>
</div>

/* CSS */
.parent {
  font-size: 20px;
}
.child {
  font-size: 1.5em; /* будет 30px, так как 1.5 * 20px */
  margin-bottom: 1em; /* тоже 20px, так как em берётся от font-size родителя */
}

Здесь у .child font-size: 1.5em вычисляется от родительского 20px, получается 30px. А margin-bottom: 1em также равен 20px, потому что em для margin берётся от font-size самого элемента (который уже стал 30px), но в данном случае мы указали 1em, и он равен текущему font-size элемента, то есть 30px. Важно помнить: em для свойств, отличных от font-size, берётся от font-size самого элемента, а не родителя.

Где применяется

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

Вывод

em зависит от font-size родительского элемента (или от самого элемента, если задан), а не от rem. Используйте em для компонентов, которые должны масштабироваться относительно своего контекста, и rem для глобального масштабирования от корня документа.