Система отступов на сайте: как управлять расстояниями между элементами

Дата публикации: 13.09.2026

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

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

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

Например, интерфейс может использовать шкалу:

4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 → 96 px

Это не универсальный стандарт, а рабочая система, которую дизайнер определяет под конкретный интерфейс. Главное — последовательность её применения.

Система отступов не требует использовать одно и то же расстояние повсюду. Разные отношения между элементами требуют разных значений.

Например, заголовок и относящийся к нему текст могут разделяться на 16px, текст и кнопку — на 24px, соседние карточки — на 32px, а крупные секции страницы — на 64px.

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

Как выбирать размер отступа

Размер отступа должен отражать степень связи между элементами. Чем теснее они связаны по смыслу, тем меньше обычно должно быть расстояние между ними. Чем сильнее нужно визуально разделить элементы или группы, тем больше становится отступ.

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

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

В первом варианте расстояния подсказывают структуру: 12px между заголовком и текстом показывает их тесную связь, 24px перед кнопкой отделяет действие от описания, а 40px перед следующей группой создаёт более заметную границу.

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

Поэтому при проектировании важно смотреть не только на отдельные значения margin и padding, а на соотношение расстояний между элементами. Именно это соотношение формирует визуальную группировку.

Как построить шкалу отступов

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

Например:

4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 → 96 px

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

Не существует одной обязательной шкалы, подходящей для любого проекта. В одном интерфейсе достаточно диапазона до 64px, в другом понадобятся значения 80px, 96px или больше. Важнее не конкретные числа, а ограниченное количество заранее определённых шагов и последовательное их применение.

Такая шкала позволяет работать с расстояниями без постоянного выбора произвольных значений. Например, 8-16px можно использовать внутри небольших компонентов, 24-32px — между элементами и группами, 48-64px — между крупными блоками, а 96px — для наиболее заметного разделения секций.

При этом шкала не является набором обязательных значений для каждого случая. Если в конкретном компоненте нужен 20px, использовать его можно. Но когда большинство отступов выбирается из ограниченного набора, интерфейс получает более последовательный ритм и его проще поддерживать при дальнейшей разработке.

Такая шкала позволяет работать с расстояниями без постоянного выбора произвольных значений. Например, 8-16px можно использовать внутри небольших компонентов, 24-32px — между элементами и группами, 48-64px — между крупными блоками, а 96px — для наиболее заметного разделения секций.

При этом шкала не является набором обязательных значений для каждого случая. Если в конкретном компоненте нужен 20px, использовать его можно. Но когда большинство отступов выбирается из ограниченного набора, интерфейс получает более последовательный ритм и его проще поддерживать при дальнейшей разработке.

В первой карточке используется ограниченный набор значений: 24px для внутреннего пространства, 16px между служебной подписью и заголовком, 12px между заголовком и текстом и 24px перед действием.

Во второй карточке используются значения 17px, 31px, 23px, 7px и 31px. Каждый отдельный отступ может выглядеть допустимо, но вместе они не образуют понятной системы.

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

Система отступов и вертикальный ритм

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

Внутри одного смыслового блока используются небольшие интервалы. Между самостоятельными блоками — более крупные. Между крупными секциями страницы — ещё больше.

Например, можно использовать 16px между заголовком и текстом, 32px между соседними группами контента и 64px между секциями.

Если эти уровни расстояний различаются достаточно заметно, структура страницы становится понятнее ещё до того, как пользователь начинает читать текст.

В этом примере используются три уровня вертикальных расстояний. 16px отделяет заголовок от относящегося к нему текста, 32px разделяет самостоятельные группы внутри одной секции, а 64px отделяет одну секцию страницы от другой.

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

На практике конкретные значения могут отличаться, но сам принцип сохраняется: размер отступа должен соответствовать уровню связи между элементами.

Отступы в адаптивном интерфейсе

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

Например, расстояние 64px между секциями на десктопе может быть уменьшено до 48px на мобильном экране. При этом небольшие интервалы внутри компонентов часто можно оставить без изменений.

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

В десктопной версии расстояние между секциями составляет 64px. На экране шириной до 700px оно уменьшается до 48px. При этом 16px между заголовком и текстом и 24px внутреннего пространства карточки остаются прежними.

Такой подход позволяет адаптировать плотность интерфейса без разрушения его иерархии. Крупные расстояния уменьшаются сильнее, а небольшие интервалы сохраняются, поскольку они отвечают за локальные связи внутри компонентов.

Как перенести систему отступов в CSS

После определения шкалы её можно зафиксировать в CSS-переменных. Тогда значения не приходится заново вводить в каждом компоненте, а изменение системы можно выполнить централизованно.

Например, шкала может быть записана как набор переменных:

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

После этого компоненты используют не произвольные значения, а элементы этой шкалы:

.card {
  padding: var(--space-5);
}

.card-title {
  margin-bottom: var(--space-3);
}

.section {
  margin-top: var(--space-8);
}

Так система отступов становится частью дизайн-системы и одновременно частью CSS-кода проекта.

Внешне обе карточки практически одинаковы. Разница находится в способе задания отступов.

В первом варианте CSS содержит конкретные значения: 24px, 16px, 12px. Если система проекта изменится, такие значения придётся искать и заменять в разных местах.

Во втором варианте компоненты используют переменные --space-*. Например, var(--space-5) соответствует 24px, а var(--space-4) — 16px. Значения шкалы хранятся отдельно от компонентов, поэтому её можно централизованно изменить или использовать в других компонентах.

Это особенно полезно в крупных интерфейсах, где одни и те же правила отступов применяются десятками компонентов.

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

Не стоит создавать слишком много значений

Если в проекте одновременно используются 13px, 14px, 15px, 16px, 17px, 18px, 19px и 20px, различия между ними часто слишком малы, чтобы иметь самостоятельное значение в визуальной иерархии.

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

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

Как определить свою систему отступов

Универсальной шкалы отступов для всех проектов не существует. Её стоит определять исходя из плотности интерфейса, размеров компонентов и общей визуальной иерархии.

Для большинства веб-интерфейсов можно начать с небольшой шкалы, например:

4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 → 96 px

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

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

Главная задача системы — не заставить интерфейс соответствовать заранее выбранным цифрам, а создать понятный набор решений, который обеспечивает последовательность и упрощает дальнейшую работу над проектом.

Заключение

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

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

При грамотном использовании отступы становятся частью визуальной системы интерфейса, а не набором случайных значений в CSS.