Отступы, из-за которых мобильная верстка выглядит “плавающей” и дешевой

Отступы, из-за которых мобильная верстка выглядит “плавающей” и дешевой

На мобильном экране отступы важнее декора: они задают ритм, читаемость и ощущение аккуратности. Если spacing не выстроен, интерфейс разваливается даже при хорошем контенте.

Рабочая схема:
— держите вертикальные отступы кратными одной базовой шкале;
— между блоками делайте больше воздуха, чем между элементами внутри блока;
— не ставьте одинаковый gap для всего экрана: у заголовка, карточки и формы разные задачи;
— следите, чтобы отступы слева и справа совпадали по всему экрану, иначе сетка “едет”.

Частая ошибка — копировать значения с десктопа без адаптации. На телефоне большой padding съедает полезную площадь, а слишком маленький делает экран тесным и нервным. Еще одна проблема — когда отступы задают отдельно каждому элементу: в итоге соседние блоки накапливают лишний воздух.

Проверьте макет в трех состояниях: короткий текст, длинный текст и экран с ошибкой или пустым состоянием. Именно там отступы ломаются чаще всего.

Если интерфейс кажется небрежным, начните не с цвета и не с шрифтов, а с расстояний: обычно именно они быстрее всего возвращают порядок.