Сетка, отступы и ритм: система 8 пунктов

Согласованные отступы — это разница между «дёшево и разъезжается» и «дорого и собранно». Секрет прост: все размеры кратны одному числу.

«Пустое пространство нужно рассматривать как активный элемент, а не пассивный фон».

Когда каждый отступ — это случайные 7, 13, 22 пикселя, интерфейс выглядит «грязным», даже если сложно сказать почему. Решение — spacing-шкала: набор разрешённых значений, обычно кратных 8 (или 4 для мелких деталей). Material Design, IBM Carbon и почти все крупные системы построены на этом.

Почему именно 8

8 делится на 2 и 4, хорошо ложится на экраны с разной плотностью пикселей и даёт достаточно ступеней, не порождая хаоса. Типичная шкала:

Токен	px	Где применяют
space-1	4	иконка ↔ текст
space-2	8	внутри мелких элементов
space-3	16	padding кнопки, карточки
space-4	24	между блоками
space-6	48	между секциями
space-8	96	крупные отбивки

В CSS это удобно зафиксировать через переменные:

/* Шкала отступов как CSS-переменные */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-6: 48px;
}

.card {
  padding: var(--space-3);        /* 16px внутри */
  margin-bottom: var(--space-4);  /* 24px между карточками */
  gap: var(--space-2);            /* 8px между элементами */
}

Правило «внутреннее ≤ внешнее»: отступ внутри элемента (padding) должен быть не больше отступа вокруг него (margin). Иначе элементы «слипаются» и группировка ломается.

  ВЕРТИКАЛЬНЫЙ РИТМ (всё кратно 8)
  --------------------------------
  Заголовок секции
  | 24
  Подзаголовок
  | 16
  [ карточка ]  padding 16
  | 24
  [ карточка ]  padding 16
  | 48  <-- больше: новая секция
  Следующая секция

Разбор глубже: почему отступы важнее цвета

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

Шкала отступов работает, потому что устраняет необходимость каждый раз принимать решение. Без шкалы у вас бесконечно много вариантов: 14, 15, 16, 17, 18... — и любой выбор кажется одинаково (не)обоснованным. Со шкалой выбор сводится к «какая ступень: 16 или 24?» — решение принимается за секунду и всегда укладывается в систему. Это превращает отступы из источника бесконечных микрорешений в предсказуемый инструмент. Дополнительный бонус: когда все размеры из одного набора, любой блок легко «встаёт» рядом с любым другим, потому что они говорят на одном языке.

Отдельно стоит сказать про вертикальный ритм. Глаз воспринимает страницу как поток, и сбои в ритме отступов он замечает так же, как ухо замечает фальшивую ноту. Если между заголовком и текстом 18px, а между текстом и следующим заголовком 22px — разница вроде микроскопическая, но страница ощущается «неровной». Кратность 8 решает это автоматически: все интервалы попадают в одну сетку, и поток становится музыкальным. Профессионалы проверяют ритм, прокручивая страницу целиком и отслеживая, нет ли «спотыканий».

Полезно понимать связь шкалы отступов с компонентами. Когда все отступы берутся из одного набора, любые два компонента, собранные разными людьми в разное время, автоматически «дружат» при соседстве: их внутренние ритмы совпадают, потому что построены на одной сетке. Это особенно ценно в командах и дизайн-системах, где десятки экранов делают разные люди. Без общей шкалы каждый ставит отступы по своему вкусу, и при сборке страницы из кусков всё «дребезжит». Со шкалой согласованность получается по построению, а не ценой бесконечного ручного выравнивания на ревью.

Как делают ПЛОХО

Каждый отступ выбирают «на глаз»: тут 14, там 19, здесь 30. Padding внутри карточки больше, чем margin между карточками — и блоки сливаются. Менять интерфейс страшно: ничего не системно.

Как делают ХОРОШО

Любой отступ берут из шкалы (4/8/16/24/48). Все размеры — через переменные, поэтому правка в одном месте меняет весь сайт. Вертикальный ритм согласован: переход к новой секции явно больше, чем между карточками внутри.

Чек-лист

Есть фиксированная шкала отступов, кратная 8 (и 4 для мелочей).
Никаких «магических» 13 или 27 пикселей.
Padding внутри ≤ margin вокруг.
Отступы заданы переменными, а не хардкодом.
Между секциями отступ заметно больше, чем внутри.

Итог. Spacing-шкала превращает отступы из случайностей в систему. Кратность 8 и переменные дают собранный вид и лёгкую правку.