em и rem: относительные размеры без случайного умножения
Единицы em и rem выражают размер относительно шрифта, но используют разные точки отсчёта.
Назначение
Единицы em и rem выражают размер относительно шрифта, но используют разные точки отсчёта.
Как это работает
rem связан с размером шрифта корневого элемента. em у font-size зависит от родительского шрифта, а у многих других свойств — от собственного вычисленного размера шрифта элемента. Вложенные изменения font-size могут накапливаться.
Пример
<style>.large{font-size:1.25rem}.large button{font:inherit;padding:.5em 1em}</style>
<div class="large"><button type="button">Масштабируемая кнопка</button></div>Что должно получиться
Размер текста привязан к корню, а внутренние отступы кнопки — к её собственному шрифту. Это позволяет увеличивать компонент без ручного пересчёта каждого отступа.
Граница применения и частая ошибка
Не задавайте каждому вложенному блоку font-size:1.2em, ожидая один и тот же размер. На нескольких уровнях текст станет последовательно увеличиваться.
Самостоятельная проверка
Сравните вложенные списки с font-size в em и rem. Затем задайте кнопке padding:.5em и измените её шрифт: отступ должен масштабироваться вместе с текстом.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.