Единицы измерения в CSS используют для определения размеров элементов, расстояний, шрифтов и других свойств. Они делятся на абсолютные и относительные.

Абсолютные единицы измерения привязаны к настоящим физическим размерам. Среди них пиксели, сантиметры, миллиметры, дюймы.

Относительные единицы измерения описывают значения, которые зависят от других значений. Среди них em, rem, vh, ex и другие единицы измерения.

В статье расскажем про пять единиц измерения: px, em, rem, fr,%.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Для чего использовать

px

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; — распределит доступное пространство между элементами в контейнере.

Подробнее о каждой единице

Пиксели px

Пиксель бывает физическим и CSS-пикселем.

Физический пиксель — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px, то подразумеваем, что по всей ширине находится 480 неделимых ячеек, где 1px равен одной ячейке.

CSS-пиксель — это единица измерения CSS, равная 1/96 части дюйма. Один пиксель не всегда равен одной ячейке на экране. Это зависит от плотности экрана, чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение.

Размер от шрифта root rem

Единица измерения, которая зависит от размера шрифта корневого элемента в документе — обычно <html>. Значение 1rem соответствует размеру шрифта корневого элемента. Например, если в теге <html> задан шрифт 16px, то для всех вложенных в него элементов font-size: 1.5rem; установит размер шрифта в 24px.

em

Единица измерения, которая задаёт размер шрифта равный родительскому элементу. Например, если у родительского элемента размер шрифта равен 16px, то font-size: 1.5em; установит размер шрифта дочернего элемента в 24px.

Для <h1> значение 2em означает, что размер шрифта будет в два раза больше, чем размер шрифта элемента-родителя.

Проценты %

Проценты задают размер относительно родительского элемента. Родительский элемент равен 100%, тогда width: 50%; будет равна половине ширины родительского элемента.

Контейнер занимает 80% ширины родительского элемента, а блок-коробка занимает 50% ширины контейнера.

Доли fr

Доля свободного пространства — относительная единица измерения, которая используется в CSS Grid для распределения доступного пространства между ячейками. Свободное пространство в родительском элементе делится на равные доли — fr, а дочерние элементы распределяют пространство между собой. На примере мы покажем, как пространство делится между элементами.