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

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

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

• Используйте один базовый шаг: 4/8/12/16 px. Не смешивайте случайные значения без причины.
• Вертикальные отступы важнее горизонтальных: они сильнее влияют на сканирование экрана.
• Не ставьте одновременно большой padding и большой margin у соседних блоков — воздух дублируется.
• У карточек и списков проверяйте ритм между заголовком, текстом и CTA: он должен повторяться.
• Не привязывайте отступы только к макету — тестируйте их на длинных и коротких текстах.

Частая ошибка — делать отступ «на глаз» для одного экрана и потом растягивать его на все состояния. На маленькой ширине тот же spacing может либо съесть полезное место, либо визуально разорвать блок.

<b>Хорошая верстка читается не за счет большого воздуха, а за счет одинаковой логики отступов во всех блоках.</b>