Чем em отличается от rem и px в CSS?
Везде разные единицы: где-то px, где-то em, где-то rem. Не понимаю, чем они отличаются и что выбирать для размера шрифта и отступов. Объясните разницу простыми словами?
2 ответа
Это три способа задать размер, разница — от чего считается:
px — абсолютные пиксели. 16px всегда 16px, ни от чего не зависит. Просто и предсказуемо.
em — относительно размера шрифта текущего элемента (а если задаёте сам font-size — то родителя). 1.5em = 1.5× от шрифта элемента.
.card { font-size: 16px; }
.card .title { font-size: 1.5em; } /* = 24px */
.card { padding: 1em; } /* = 16px, привязано к шрифту */
Коварство em: он накапливается при вложенности. Если у вложенных списков font-size: 1.2em, на каждом уровне размер умножается — текст «убегает».
rem (root em) — относительно шрифта корня <html> (по умолчанию 16px), всегда от одной точки отсчёта, без накопления:
html { font-size: 16px; }
.title { font-size: 1.5rem; } /* = 24px, где угодно */
Что выбирать:
rem— для шрифтов и большинства размеров: масштабируемо и предсказуемо; меняешь шрифт уhtml— пропорционально едет весь сайт (плюс уважает настройки размера шрифта у пользователя);em— когда отступ/размер должен зависеть именно от шрифта данного компонента (например, padding кнопки относительно её текста);px— для тонких границ (1px) и мест, где нужна жёсткая фиксация.
Практичная установка: базовый размер задаёте на html (можно в процентах, font-size: 100% = 16px), дальше шрифты и отступы в rem. Это даёт «единый рубильник» масштаба и уважает доступность — если человек увеличил шрифт в браузере, вёрстка на rem/em подстроится, а намертво забитые px нет. em приберегите для самодостаточных компонентов.