Почему именно кратно 4
Связь с реальными экранами
Большинство экранов и CSS-систем живут в 4px / 8px логике:
- Retina, Full HD, 2K, 4K → всё кратно 2 и 4
- Браузеры, шрифты, line-height → лучше рендерятся на шагах 4px
- 1–3 px часто дают «грязь» и дробные значения
4 px — минимальный атом, меньше шум.
Что происходит, если не делить на 4
- текст «плывёт»
- линии выглядят мыльно
- макет кажется кривым, даже если всё ровно
Ты не видишь проблему — но мозг её чувствует.
Связь с кодом (CSS / dev)
Если дизайнер ставит «рандомные» отступы:
- 13
- 17
- 22
программист получает: margin: 13px 17px 22px 19px;
Если всё кратно 4: margin: 16px 24px;
Масштабируемость
Если завтра:
- мобильная версия
- планшет
- другой шрифт
- другой container width
кратные 4 масштабируются, а случайные — ломаются.
Базовая сетка (минимум)
4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64
Самая популярная — 8px system
(но 4px остаётся атомом)
8 — мелкие отступы
16 — стандарт
24 — между блоками
32 — секции
48+ — крупные зоны
Вертикаль важнее горизонтали
Вертикальные отступы:
- строже
- повторяются чаще
Горизонтальные:
- допускают вариации
- но всё равно кратно 4
Золотое сочетание (практика)
Простейшие рабочие пары:
Внутренние и внешние — разные
Например:
- padding карточки → 16
- gap между карточками → 24
Не равняй всё одинаково.
Текст живёт по line-height
Если line-height = 24px
→ отступы 16 / 24 / 32, а не 18 или 22.
Когда МОЖНО отступить от кратности 4
✔ иконки (оптическая коррекция)
✔ визуальные иллюзии (центр «чуть смещён»)
✔ декоративные элементы
✔ логотипы
❌ нельзя для:
- карточек
- форм
- сеток
- интерфейсных блоков
Идеально:
Заведи spacing tokens:
space-4
space-8
space-16
space-24
space-32
Отступы кратные 4 — это не про красоту,
это про порядок, масштабируемость и уважение к коду.
Как это применять
В Figma
- Включай layout grid
- Используй Auto Layout
- Проверяй, чтобы padding и gap были кратны 4
- Никогда не ставь «на глаз» 13, 19, 27
В вёрстке
- padding / margin только из шкалы
- никаких 17px и 22px
- если хочется «чуть меньше» — бери шаг вниз (16 вместо 20)
Инструменты, которые реально помогают
Проверка контейнеров прямо в браузере
DOM Inspector — встроенный инспектор браузера
Позволяет увидеть реальную структуру блоков, а не то, что «казалось» в макете.
VS Bug / Outline Containers (Chrome)
Расширения для Chrome, которые:
- подсвечивают границы всех HTML-элементов
- показывают реальные отступы
- помогают понять, где «распухло»
Идеально для ревью чужой вёрстки и своих решений.
Скрипт для консоли браузера (мой GitHub)
Небольшой JS-скрипт, который включает и выключает контуры всех элементов прямо на странице — без перезагрузки.
Репозиторий:
https://github.com/Eva-Kotofe-Eva/outline-containers-debug
Можно:
- запускать из DevTools
- сохранить как bookmarklet
- использовать на любом сайте
Это честный рентген для дизайнера.