CSS использует разные единицы измерения для задания размеров, отступов, шрифтов и других свойств. Разделяют абсолютные и относительные единицы. Понимание различий между ними — фундаментальная основа адаптивной, масштабируемой и удобной в поддержке вёрстки.

Абсолютные:

  • px — пиксели
  • cm — сантиметры
  • mm — миллиметры
  • in — дюймы
  • pt — типографские пункты
  • pc — пика

Относительные:

  • z% — процент от родителя
  • em — от размера шрифта родителя
  • rem — от размера шрифта корня
  • vw — 1% от ширины вьюпорта
  • vh — 1% от высоты вьюпорта
  • vmin / vmax — минимальное/максимальное из vw и vh
  • fr — доля пространства в грид-сетке
  • ch — ширина символа «0»
  • ex — высота строчной буквы «x»

Примеры ниже снабжены пояснениями из практики, с фокусом на применение в реальных проектах.

px — пиксели

Тип: абсолютная
Поддержка: везде
Применение: повсеместно

body {
  font-size: 16px;
  margin: 20px;
}

Когда использовать: Пиксели подходят для точных размеров, таких как иконки, кнопки и UI-элементы. Часто применяются как базовая единица, особенно на макетах.

Когда избегать: Не стоит использовать для шрифтов — это мешает доступности. Также нежелательны в адаптивной вёрстке: не масштабируются под размер экрана.

Совет: Используйте умеренно, для точных деталей.

% — проценты

Тип: относительная
Применение: ширина, отступы, шрифты (редко)

.container {
  width: 80%;
}

Когда использовать: Идеальны для ширины элементов, особенно вложенных блоков, которым нужно наследовать размеры от родителя.

Когда избегать: В высоте могут вести себя непредсказуемо, если родитель не имеет заданной высоты.

Совет: Отлично работает для ширины, особенно в гибких макетах.

rem — относительная к корневому шрифту

Тип: относительная
Применение: шрифты, отступы, размеры, ширина контейнеров

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 32px */
}

Когда использовать: Хорош для масштабируемых интерфейсов: одно изменение font-size в  масштабирует всё остальное.

Когда избегать: Почти не бывает причин избегать — универсален и удобен.

Совет: Рекомендуется как основная единица для всех размеров.

em — относительная к родительскому шрифту

Тип: относительная
Применение: шрифты, отступы, вложенные компоненты

button {
  font-size: 1em;
  padding: 0.5em 1em;
}

Когда использовать: Удобен внутри компонентов, где размеры зависят от родителя. Хорош для внутренних отступов.

Когда избегать: В каскаде может дать неожиданный результат, если вложенность сложная.

Совет: Используйте для компонентов, особенно при оформлении кнопок и карточек.

vw / vh — проценты от вьюпорта

Тип: относительная

  • 1vw = 1% от ширины окна
  • 1vh = 1% от высоты окна
.hero {
  height: 100vh;
  font-size: 5vw;
}

Когда использовать: Отличны для полноэкранных секций, динамичных заголовков и блоков, завязанных на размер экрана.

Когда избегать: На мобильных могут вести себя нестабильно — адресная строка влияет на размер окна.

Совет: Используйте с осторожностью, особенно vh на iOS — лучше lvh или JS-хаки.

fr — единица фракции в grid

Тип: относительная
Применение: grid-template-columns, grid-template-rows

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Когда использовать: Лучший выбор для гибких макетов на Grid. Позволяет легко делить пространство.

Когда избегать: Почти нет причин избегать — универсальна в пределах грида.

Совет: По умолчанию выбирайте fr в грид-сетках.

ch — ширина «0» символа

Тип: относительная
Применение: ширина полей ввода, консольных блоков

input {
  width: 30ch;
}

Когда использовать: Идеален для полей форм, особенно когда нужна ширина по количеству символов.

Когда избегать: Не годится, если используется не моноширинный шрифт.

Совет: Удобен в <input> и <textarea>.

ex — высота строчной буквы x

Тип: относительная
Редкость: крайне редко используется

p {
  line-height: 2ex;
}

Когда использовать: Почти никогда — очень специфична, зависит от шрифта.

Когда избегать: Лучше избегать всегда, если нет веских причин.

cm, mm, in — сантиметры, миллиметры, дюймы

Тип: абсолютные
Применение: печатные стили (@media print)

@media print {
  body {
    width: 21cm;
  }
}

Когда использовать: Только в печатной вёрстке.

Когда избегать: Не для экранной вёрстки — нет смысла.

pt / pc — типографские пункты

Применение: аналогично cm/mm — только в печати.

ic — ширина идеографического символа

Тип: относительная
Происходит от: ideographic character
Применение: вёрстка на CJK-языках (китайский, японский, корейский)

input {
  width: 10ic;
}

Когда использовать:
ic подходит для интерфейсов на языках с идеографическим письмом. Например, чтобы задать ширину поля ввода, в которое должно помещаться ровно 10 иероглифов, используйте width: 10ic. Эта единица учитывает ширину текущего шрифта и делает вёрстку более естественной для азиатских пользователей.

Когда избегать:
В интерфейсах на кириллице или латинице ic не даёт ожидаемых результатов. Поведение может быть непредсказуемым, особенно если используется неидеографический шрифт или смешанные символы.

Совет: Отлично работает в сочетании с CJK-шрифтами и интерфейсами на восточноазиатских языках. Для остальных случаев предпочтительнее ch.

Итоговая таблица применения

ЕдиницаТипПрименениеСтоит использовать?
pxабсолютнаяUI, точные отступыДа, но с осторожностью
%относительнаяширина, вложенностьДа
remотносительнаямасштабируемые размеры, особенно шрифтДа
emотносительнаякомпоненты, отступыДа, с учётом контекста
vw/vhотносительнаяhero-блоки, fullscreenДа, но проверять в мобилках
frотносительнаяGrid layoutДа, без ограничений
chотносительнаяформы, поля вводаДа
exотносительнаяспецкейсыНет
cm/mm/inабсолютнаяпечатьДа, только для print
pt/pcабсолютнаяпечатьДа, только для print

Если вы новичок — начните с rem, %, px и fr. Постепенно подключайте em и vw/vh, когда поймёте поведение и каскад.

Хорошая практика:

  • Шрифты — rem
  • Внутренние отступы — em
  • Сетки — fr
  • Размеры контейнеров — % или vw
  • Точные размеры — px

Грамотное сочетание единиц делает вашу вёрстку гибкой, адаптивной и масштабируемой.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как анимировать CSS Grids без JavaScript

Как анимировать CSS Grids без JavaScript

Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float, flex и position. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.

Да, grid-template-columns и grid-template-rows существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.

Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns и grid-template-rows вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents. Просто работает.

Читать дальше
CSS
  • 1 июня 2025
Как размыть фон под элементом с помощью backrop-filter

Как размыть фон под элементом с помощью backrop-filter

В сентябре 2024 в Baseline в статусе Widely-available вошло CSS-свойство backdrop-filter. Оно делает красивое: позволяет применить фильтры (размытие, контраст, яркость, и прочее) к фону за элементом. Не к самому элементу, а именно к тому, что за ним — это важно.

То есть если у вас есть модальное с полупрозрачным фоном, вы можете сделать так, чтобы то, что под ней, красиво размывалось, как в macOS или на айфоне. Это и есть главное применение backdrop-filter.

Пример минимального кода:

<div class="glass-panel">Контент</div>

.glass-panel {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3);
}

Чтобы это работало, у элемента должен быть фон с прозрачностью (например, rgba или hsla), иначе фильтр не виден. И да, backdrop-filter визуально различим только если элемент реально перекрывает что-то.

Читать дальше
CSS
  • 5 мая 2025
Справочник по новым математическим функциям CSS

Справочник по новым математическим функциям CSS

За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.

Эта статья — справочник, который вы можете добавить в закладки и обращаться по мере необходимости. А подробно ознакомиться с работой математических функций можно в интерактивной демонстрации в HTML Academy.

Статья дополняется.

Читать дальше
CSS
  • 28 апреля 2025
CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться

CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться

Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.

Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.

Внимание! Все примеры в этой статье работают только в Chrome 116+.

Читать дальше
CSS
  • 27 апреля 2025
Анимация по любой траектории с offset-path

Анимация по любой траектории с offset-path

У вас же было такое, что ждёте курьера или доставку, а их всё нет и нет? Заходите сайт, обновляете статус, а там «В пути» и больше никакой информации. У нас вот было много раз.

В хороших случаях курьера рисуют прямо на карте, и показывают, где он едет, где проехал, и прямо анимацией можно всё рассмотреть.

Читать дальше
CSS
  • 18 апреля 2025
Автоматическая тёмная тема: новая CSS-функция light-dark()

Автоматическая тёмная тема: новая CSS-функция light-dark()

CSS-функция light-dark() облегчает жизнь при поддержке светлой и тёмной темы. Раньше, чтобы задать разные стили для разных тем, приходилось писать медиа-выражения вроде @media (prefers-color-scheme: dark) и дублировать одни и те же куски стилей с поправками на цвет. Это работало, но выглядело избыточно и громоздко, особенно когда надо было поменять всего один цвет. Для системности создавались CSS-переменные — например, --text-color, значение которой менялось внутри медиавыражения. Всё это работало, но напоминало церемонию ради церемонии.

С light-dark() всё стало проще. Это функция, которая на лету подставляет значение в зависимости от активной темы. Если у пользователя включена светлая тема, функция вернёт первое значение. Если тёмная — второе. Пример: color: light-dark(black, white) — в светлой теме будет чёрный текст, в тёмной — белый. Всё. Никаких переменных, никаких @media. Просто одно свойство и два значения — читаемо, логично, компактно.

Читать дальше
CSS
  • 23 апреля 2024
Псевдокласс :link

Псевдокласс :link

Псевдокласс :link в CSS предназначен для стилизации ссылок, которые ещё не были посещены пользователем. Этот псевдокласс позволяет разработчикам задавать внешний вид для непосещенных ссылок отдельно от тех, по которым пользователь уже переходил, что помогает лучше ориентироваться на странице и повышает удобство использования сайта.

Пример использования псевдокласса :link для стилизации непосещенных ссылок:

a:link {
  color: #007bff;
  text-decoration: none;
}

В данном примере для всех непосещенных ссылок устанавливается синий цвет (#007bff) и убирается подчеркивание. Это делает внешний вид ссылок более аккуратным и одновременно информативным, поскольку пользователь может легко отличить их от уже посещенных (:visited) ссылок.

При работе с :link, важно помнить, что этот псевдокласс должен использоваться в сочетании с псевдоклассом :visited для полной стилизации состояний ссылок. Также рекомендуется определять стили для псевдоклассов :hover и :active, чтобы обеспечить интерактивный и отзывчивый интерфейс.

Пример полного набора стилей для ссылок:

a:link {
  color: #007bff;
  text-decoration: none;
}

a:visited {
  color: #666;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:active {
  color: #ff0000;
}

В этом примере задаются различные стили для всех возможных состояний ссылок: :link для непосещённых, :visited для посещённых, :hover при наведении курсора и :active в момент нажатия на ссылку. Такой подход позволяет создать более динамичный и интуитивно понятный интерфейс веб-страницы.

CSS
  • 4 апреля 2024
Селектор потомков (пробел)

Селектор потомков (пробел)

Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.

Пример использования селектора потомков:

article p {
  color: #333;
  line-height: 1.6;
}

В данном примере все абзацы (<p>), которые находятся внутри элемента <article>, будут окрашены в темно-серый цвет и получат межстрочный интервал в полтора размера шрифта. Селектор потомков позволяет легко управлять стилем конкретных элементов, сохраняя при этом общую структуру и читаемость кода.

Селектор потомков особенно полезен в следующих случаях:

  1. Структурирование контента: Помогает стилизовать элементы внутри определенных секций или компонентов, не затрагивая похожие элементы в других частях страницы.
  2. Тематическое оформление: Используется для применения уникальных стилей к элементам, расположенным внутри определенных контейнеров, например, для статей, сайдбаров или футеров.
  3. Изоляция стилей: Обеспечивает локальное применение стилей, предотвращая их случайное распространение на другие элементы документа.

Применение селектора потомков упрощает создание модульной и легко поддерживаемой структуры стилей, позволяя разработчикам более точно и гибко управлять внешним видом веб-страницы.

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

CSS
  • 4 апреля 2024
Псевдокласс :focus

Псевдокласс :focus

Псевдокласс :focus в CSS используется для стилизации элементов, которые получили фокус. Это может быть, например, текстовое поле в форме, к которому пользователь переместил курсор для ввода, или ссылка, выбранная через клавиатурный ввод. Псевдокласс :focus позволяет создать более интерактивный и доступный пользовательский интерфейс, подсвечивая активные или выбранные элементы.

Пример использования :focus:

input:focus {
  border: 2px solid blue;
  background-color: lightblue;
}

В этом примере для всех текстовых полей (input) при получении фокуса будет изменяться цвет границы на синий и фоновый цвет на светло-синий. Это обеспечивает наглядную обратную связь пользователю о том, какой элемент формы активен в данный момент, улучшая общую пользовательскую доступность и удобство использования интерфейса.

Псевдокласс :focus особенно важен для:

  1. Улучшения доступности: Он помогает пользователям с ограниченными возможностями или теми, кто использует клавиатурный ввод вместо мыши, понимать, какой элемент управления в данный момент активен.
  2. Повышения интерактивности: Визуальное отличие активных элементов делает интерфейс более дружелюбным и понятным для пользователя.
  3. Создания стилистических акцентов: Позволяет добавлять уникальные стилистические особенности для интерактивных элементов интерфейса, подчеркивая их функциональность.

Применение :focus в сочетании с другими псевдоклассами, такими как :hover и :active, позволяет создать комплексное визуальное представление различных состояний элементов управления, делая интерфейс более интуитивно понятным и приятным в использовании.

Однако, важно помнить, что стилизация элементов при помощи :focus должна быть достаточно заметной, чтобы пользователь мог легко идентифицировать фокусируемый элемент, но при этом не должна быть слишком навязчивой, чтобы не отвлекать от общего восприятия интерфейса.

CSS
  • 4 апреля 2024
Селектор по id

Селектор по id

CSS-селектор по идентификатору (id) позволяет стилизовать элементы веб-страницы, которые имеют уникальный идентификатор. Использование селектора по id делает возможным точечное применение стилей к конкретному элементу, не затрагивая другие элементы на странице.

Селектор по id обозначается знаком решетки (#) перед именем идентификатора. Идентификаторы в HTML должны быть уникальными в пределах документа, что делает селектор по id мощным инструментом для стилизации конкретных элементов.

Пример использования селектора по id:

<div id="uniqueElement">Этот элемент уникален.</div>
#uniqueElement {
  color: green;
  font-size: 20px;
}

В этом примере элементу <div> с id="uniqueElement" присваиваются стили, делающие текст зеленым и увеличивающие размер шрифта до 20 пикселей. Эти стили будут применены только к этому конкретному элементу благодаря уникальности идентификатора.

Преимущества использования селектора по id:

  1. Точечная стилизация: Селектор по id позволяет применять стили к конкретному элементу, не влияя на другие элементы.
  2. Высокий приоритет: Стили, примененные через селектор по id, имеют более высокий приоритет, чем стили, примененные через классы и теги, что облегчает переопределение стилей.

Важно помнить:

  • Идентификатор должен быть уникальным в пределах всего HTML-документа.
  • Злоупотребление селекторами по id может сделать CSS-код сложным для поддержки, особенно в больших проектах. Рекомендуется использовать их с умом, предпочитая классы для стилизации, когда это возможно.
  • Селекторы по id могут увеличить специфичность CSS-правил, что иногда затрудняет их переопределение.

Использование селектора по id является мощным инструментом в арсенале веб-разработчика, позволяя точечно влиять на стиль отдельных элементов страницы.

CSS
  • 4 апреля 2024