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

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

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

• Не мешай margin и padding без системы: один отвечает за дистанцию между блоками, другой — за внутренний воздух.
• Держи вертикальный ритм кратным одной базовой сетке, чтобы карточки, заголовки и списки не «прыгали».
• На узких экранах уменьши большие внешние отступы первым делом, а не шрифт: так контент не станет тесным.
• Следи за краями экрана: контент не должен прилипать к обрезу и не должен выглядеть «вдавленным» в контейнер.

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

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