Отступы в мобильной верстке: где чаще всего ломают макет и как это исправить

Отступы в мобильной верстке: где чаще всего ломают макет и как это исправить

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

Проверьте 4 зоны:
— между заголовком и текстом;
— между карточками и кнопками;
— внутри кликабельных блоков;
— у краев экрана, чтобы контент не прилипал к рамке.
Главная ошибка — задавать отступы «на глаз» в каждом блоке отдельно. В итоге один и тот же тип элементов выглядит по-разному на соседних экранах.

Лучше держать 1–2 базовых шага отступов и повторять их по всему интерфейсу. Тогда интерфейс становится предсказуемым: пользователь быстрее сканирует экран, а дизайн выглядит собранным даже без сложной графики. Для мобильной верстки это особенно важно в карточках, списках и формах. 📱

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