Единицы измерения в CSS: px, rem, em, fr, %
Единицы измерения в CSS используют для определения размеров элементов, расстояний, шрифтов и других свойств. В статье расскажем про пять единиц измерения: px , em , rem , fr , % . Они делятся на абсолютные и относительные. Давайте разбираться, чем они отличаются.
💡 Абсолютные единицы измерения привязаны к настоящим физическим размерам.
Познакомиться со всеми абсолютными единицами измерения можно в спецификации. Среди них пиксели, сантиметры, миллиметры, дюймы и непривычные нам единицы измерения вроде одной сороковой доли сантиметра.
💡 Относительные единицы измерения описывают значения, которые зависят от других значений.
Познакомиться со всеми относительными единицами измерения можно в спецификации. Среди них em , rem , vh , ex и другие единицы измерения.
Варианты единиц измерения
px
Пиксель бывает физическим и CSS-пикселем.
Физический пиксель — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px , то подразумеваем, что по всей ширине находится 480 неделимых ячеек, где 1px равен одной ячейке.
CSS-пиксель — это единица измерения CSS, равная 1/96 части дюйма. Один пиксель не всегда равен одной ячейке на экране. Это зависит от плотности экрана, чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение. Подробнее рассказали в статье «Как подготовить вёрстку к retina-экранам».
Пример использования
rem
Единица измерения, которая зависит от размера шрифта корневого элемента в документе — обычно . Значение 1rem соответствует размеру шрифта корневого элемента. Например, если в теге задан шрифт 16px , то для всех вложенных в него элементов font-size: 1.5rem; установит размер шрифта в 24px .
Пример использования
em
Единица измерения, которая задаёт размер шрифта равный родительскому элементу. Например, если у родительского элемента размер шрифта равен 16px , то font-size: 1.5em; установит размер шрифта дочернего элемента в 24px .
Пример использования
Для значение 2em означает, что размер шрифта будет в два раза больше, чем размер шрифта элемента-родителя.
Проценты задают размер относительно родительского элемента. Родительский элемент равен 100% , тогда width: 50%; будет равна половине ширины родительского элемента.
Пример использования
Контейнер занимает 80% ширины родительского элемента, а блок-коробка занимает 50% ширины контейнера.
fr
Доля свободного пространства — относительная единица измерения, которая используется в CSS Grid для распределения доступного пространства между ячейками. Свободное пространство в родительском элементе делится на равные доли — fr , а дочерние элементы распределяют пространство между собой. На примере мы покажем, как пространство делится между элементами.
Пример использования
Для чего использовать
px
- Задаёт ширину и высоту элементов: width: 200px; , height: 100px; .
- Задаёт отступы и поля: margin: 10px; , padding: 20px; .
- Задаёт размер шрифта: font-size: 16px; .
rem и em
- Задаёт размер шрифта: font-size: 1.5rem; , font-size: 1.2em; .
- Задаёт отступы и полей с учетом размера шрифта: margin: 0.5rem; , padding: 0.8em; .
- Задаёт размер элементов относительно размеров родительского элемента: width: 50%; , height: 75%; .
- Задаёт отступы и поля относительно размеров родительского элемента: margin: 10%; , padding: 5%; .
fr
- Используется для распределения доступного пространства между ячейками сетки: grid-template-columns: 1fr 2fr; — распределит доступное пространство между двумя колонками в соотношении 1:2.
- Используется для распределения пространства между элементами в гибком контейнере: flex: 1fr; — распределит доступное пространство между элементами в контейнере.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
rem , em
Относительные единицы измерения, которые считаются от размера шрифта.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента или — rem (от root ephemeral unit — «главная относительная единица»).
Пример
Скопировать ссылку «Пример» Скопировано
Пусть размер шрифта корневого элемента будет равен 16 пикселям:
html font-size: 16px;>html font-size: 16px; >
Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:
.block font-size: 1.5rem;>.block font-size: 1.5rem; >
Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em , то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.
.block__elem width: 5em;>.block__elem width: 5em; >
А если самому элементу задать размер шрифта 2em , то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.
.block__elem width: 5em; font-size: 2em;>.block__elem width: 5em; font-size: 2em; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Как и все остальные единицы измерения в CSS — em и rem пишутся сразу после числового значения без пробела:
.selector width: 10em;> .selector margin: 5rem;>.selector width: 10em; > .selector margin: 5rem; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Единицы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width , height , padding , margin , border — width и так далее.
Итоговое значение размера, заданное через em и rem , вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem , изменится.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Часто при работе с rem для селектора html пишется следующее CSS-правило:
html font-size: 62.5%;>html font-size: 62.5%; >
Магическое число 62.5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.
Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.
На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
🛠 Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl — , то значение шрифта у также пропорционально изменится, даже если оно было задано явно. Такое масштабирование будет происходить более пропорционально, если при вёрстке вы сможете найти закономерности размеров элементов относительно размера шрифта.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, и меняются только фактические размеры, то можно сделать, например, так:
html /* 10px */ font-size: 62.5%;> .title-block /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem;> @media (max-width: 640px) html /* 8px */ font-size: 50%; >>html /* 10px */ font-size: 62.5%; > .title-block /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem; > @media (max-width: 640px) html /* 8px */ font-size: 50%; > >
Без дополнительных правил ширина блока уменьшилась до 80px, а размер шрифта внутри до 16px.
Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение 😇
font — size
Значение в em высчитывается относительно текущего шрифта. Поэтому дочерняя строка в 1.5 раза больше, чем родительская.
Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера, а этот текст в 1.5 раза больше, чем в родительском контейнере.div class="parent"> Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера, span class="child"> а этот текст в 1.5 раза больше, чем в родительском контейнере. span> div>
.parent font-size: 1.5em;> .child font-size: 1.5em;>.parent font-size: 1.5em; > .child font-size: 1.5em; >
А вот как сочетается значение em , когда родительский элемент задан в процентах.
Очень часто можно встретить ситуацию, когда размер шрифта у html равен 62 . 5 % . Это магическое число появилось не просто так. Всё дело в том, что стандартный размер шрифта в браузере — 16 пикселей. А 62.5% от него равно 10 пикселям. Что крайне удобно для расчётов.
Здесь основной текст такой же, как в стандартных настройках браузера, а эта фраза в 1.6 раз больше, чем основной текст.div> span> Здесь основной текст такой же, как в стандартных настройках браузера, span>а эта фраза в 1.6 раз больше, чем основной текстspan>. span> div>
Теперь 1 em будет равен 10 px (62.5% от 16), а размер шрифта будет 10 * 1.6 = 16px:
html font-size: 62.5%;> span font-size: 1.6em;>html font-size: 62.5%; > span font-size: 1.6em; >
Пример, где размер шрифта не зависит от родительского элемента, потому что мы задали его в rem .
Теперь один контейнер находится внутри другого, но относительный размер текста больше не зависит от родительского элемента.span> Теперь один контейнер находится span>внутри другогоspan>, но относительный размер текста больше не зависит от родительского элемента. span>
Размер 1em равен 16px, как в стандартных настройках браузера:
html font-size: 100%;> span font-size: 2rem;>html font-size: 100%; > span font-size: 2rem; >
И ещё три примера, как можно задать размер шрифта.
Текст параграфа будет очень большим:
p font-size: xx-large;>p font-size: xx-large; >
Заголовок будет в 2.5 раза больше, чем текст вокруг него:
h1 font-size: 250%;>h1 font-size: 250%; >
Размер текста внутри тега будет равен 16px, независимо ни от чего:
span font-size: 16px;>span font-size: 16px; >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Если не задать никакое значение font — size , то браузер использует размер по умолчанию. Обычно это 16px .
💡 У font — size не бывает отрицательных значений.
💡 Размер шрифта наследуется.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Для использования относительных единиц измерения — em , rem или проценты — нужно чётко понимать, от чего будет отсчитываться 1 единица. На начальном этапе я бы не советовала использовать эти единицы для размера шрифта. Велика вероятность, что вы запутаетесь в вычислениях.
🛠 Если в вёрстке используются строчно-блочные ( inline — block ) элементы, то не забывай задавать родителю свойство font — size со значением 0 .
Между строчно-блочными ( inline — block ) элементами, как и между словами в тексте, есть небольшие отступы — пробелы. Устанавливайте размер шрифта в ноль чтобы эти отступы не влияли на положение вложенных элементов и можно было получить более ожидаемый результат от задания внешних отступов.
🛠 Единицы измерения pt не используются в вёрстке веба. Эта единица измерения возникла ещё во времена вёрстки печатной продукции, например, газет.
Сперва она перекочевала в Фотошоп, к дизайнерам. Многие из них также перешли из печатки в веб. По инерции эта единица просочилась и в CSS, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.