Отступы, которые делают мобильную верстку аккуратной, а не «плывущей»

Отступы, которые делают мобильную верстку аккуратной, а не «плывущей»

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

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

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

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

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