Отступы ломают мобильную верстку чаще, чем кажется — вот где смотреть первым делом

Отступы ломают мобильную верстку чаще, чем кажется — вот где смотреть первым делом

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

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

Еще один важный момент — единый ритм. Если у карточек один нижний отступ, у кнопок другой, а у изображений третий, страница начинает «сыпаться». Удобнее выбрать несколько шагов сетки и использовать их везде: 8, 16, 24. Тогда интерфейс выглядит собранным, а адаптация проходит без хаоса.

Проверьте макет в узком состоянии: если блоки дышат, но не расползаются, отступы настроены правильно.