Отступы ломают мобильную верстку чаще, чем кажется: 6 правил без лишней магии

Отступы ломают мобильную верстку чаще, чем кажется: 6 правил без лишней магии

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

Держите один базовый шаг для вертикальных отступов и используйте его везде:
• между секциями
• внутри карточек
• между заголовком, текстом и CTA
Так интерфейс собирается в понятную сетку, а не в набор случайных зазоров.

Не пытайтесь компенсировать плохую иерархию большим padding’ом. Если блок пустой, лишний отступ только подчеркнет это. Лучше сократить текст, усилить заголовок или собрать элементы плотнее.

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

Сильная мобильная верстка начинается не с красивых блоков, а с предсказуемых отступов. Один ритм на весь экран почти всегда выглядит дороже, чем десяток случайных решений.