⚠️ Почему em может быть неудобен в отступах ⚠️

em — рабочая единица измерения. Но в отступах она часто ведёт себя неочевидно.

em всегда зависит от размера шрифта конкретного элемента. Звучит безобидно, пока не начинаешь ставить отступы.

Например, задаём margin 3em.
У текста с font-size 16px получаем одно расстояние.
У заголовка с font-size 56px те же 3em превращаются уже в совсем другой отступ.

Технически всё верно. Но визуально начинается хаос: в настройках одно и то же значение, а на экране — разные расстояния. Чем больше текстовых стилей в проекте, тем сложнее держать систему под контролем. Особенно если хочется, чтобы отступы были предсказуемыми.

💡 В этот момент на сцену выходит rem

rem не завязан на конкретный текст. Он зависит только от корневого элемента. Поэтому 3rem остаются понятным, стабильным значением для разных блоков. Отступ не прыгает только потому, что внутри другой размер шрифта.

Это сильно упрощает жизнь в вёрстке:
– не нужно каждый раз вспоминать, какой сейчас font-size у элемента
– не нужно заворачивать текст в лишние обёртки ради «нормальных» отступов;
– не нужно гадать, почему одинаковое число выглядит по-разному.

По итогу:
em полезен в своих задачах, но для базовых отступов в лендинге он может быть неудобен.
Если нужна предсказуемая система размеров, rem обычно спокойнее. Меньше сюрпризов, меньше ручных правок и меньше ощущения, что отступы живут собственной жизнью 😎