Отступы в мобильной верстке: 7 правил, которые спасают интерфейс

Отступы в мобильной верстке: 7 правил, которые спасают интерфейс

Отступы — это не «пустое место», а инструмент иерархии. На мобильном экране они помогают отделять смысловые блоки, вести взгляд и не превращать экран в плотную стену текста.

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

Частая ошибка — ставить расстояния на глаз в каждом блоке отдельно. В итоге интерфейс выглядит случайным: где-то пусто, где-то тесно, и пользователь хуже считывает структуру. Лучше задать систему и повторять ее по всему экрану.

Еще один важный момент: отступы должны работать вместе с типографикой. Крупный заголовок просит больше воздуха, плотный список — меньше, а CTA-кнопка должна отделяться от текста так, чтобы ее не пропустили.

Проверьте один экран в двух состояниях: с коротким и длинным контентом. Если структура не разваливается, отступы настроены правильно.