Единица em в CSS похожа на rem, но считается не от корневого элемента страницы, а от размера шрифта ближайшего родительского элемента, что делает перевод в пиксели менее прямолинейным. Калькулятор выше помогает быстро посчитать перевод при известном размере шрифта родителя.
Формула перевода em в px
Базовая формула аналогична переводу rem, но с ключевым отличием - используется размер шрифта родительского элемента, а не корневого:
px = em × Размер шрифта родительского элемента (px)
Если родительский элемент имеет стандартный размер шрифта 16px и сам не переопределяет его относительно своего родителя, расчёт совпадает с переводом rem.
Пример: отступ внутри кнопки
Кнопка имеет размер шрифта 18px, а внутренний отступ задан как 0,75em относительно этого размера.
px: 0,75 × 18 = 13,5px.
Если бы размер шрифта кнопки изменился, например, на 20px, тот же отступ в 0,75em автоматически пересчитался бы в 0,75 × 20 = 15px без изменения значения в коде - именно в этом основное удобство em для локальных, зависимых от контекста значений.
Пример: каскадное умножение при вложенности
Родительский блок имеет размер шрифта 1,2em относительно базовых 16px, что даёт 1,2 × 16 = 19,2px. Дочерний элемент внутри этого блока задаёт свой размер как 1,2em относительно родителя.
Итоговый размер дочернего элемента: 1,2 × 19,2 = 23,04px, а не 1,2 × 16 = 19,2px, как могло бы показаться при поверхностном расчёте без учёта каскадного умножения.
Почему рекомендуется ограничивать использование em
Каскадное умножение делает точный перевод em в px не всегда очевидным без анализа всей цепочки вложенности элементов, что усложняет отладку вёрстки и повышает риск непредсказуемых размеров при глубокой вложенности компонентов с разными настройками шрифта. Многие руководства по CSS рекомендуют использовать em точечно, для действительно локальных зависимых значений внутри одного компонента, а для большинства остальных случаев - размеров шрифта заголовков, глобальных отступов, ширины контейнеров - применять rem, значение которого остаётся предсказуемым независимо от того, насколько глубоко элемент вложен в структуру страницы.
Пример: расчёт для трёхуровневой вложенности
Рассмотрим более сложный случай с тремя уровнями вложенности. Корневой элемент имеет базовый размер 16px. Внешний блок задаёт размер шрифта 1,1em (16 × 1,1 = 17,6px). Внутренний блок внутри него задаёт свой размер как 1,1em относительно внешнего блока (17,6 × 1,1 = 19,36px). Элемент внутри внутреннего блока снова задаёт 1,1em (19,36 × 1,1 ≈ 21,3px).
Итоговый размер самого вложенного элемента составляет примерно 21,3px, хотя на первый взгляд можно было бы ожидать значение, близкое к 16 × 1,1 = 17,6px без учёта всей цепочки умножений. Именно такое накопление многие разработчики считают главным неудобством единицы em в сложных, глубоко вложенных компонентах интерфейса.
Практическая рекомендация по выбору единицы
Хорошее эмпирическое правило - использовать em только для значений, которые концептуально должны масштабироваться вместе с текстом конкретного компонента (например, иконка рядом с текстом кнопки или внутренний отступ бейджа), и переключаться на rem для всего остального, что должно вести себя предсказуемо независимо от структуры страницы. Такое разделение сохраняет удобство относительного масштабирования там, где оно действительно нужно, и одновременно избавляет от сюрпризов каскадного умножения в остальной части вёрстки.