Отступы, из-за которых мобильная верстка разваливается на ровном месте

Отступы, из-за которых мобильная верстка разваливается на ровном месте

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

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

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

Еще один нюанс — отступы должны работать вместе с переносами. Если заголовок уходит на две строки, а сверху и снизу у него одинаковый зазор, композиция ломается. Смотрите не на отдельный блок, а на расстояние между визуальными группами.

Хорошая мобильная сетка начинается с дисциплины в отступах: сначала структура и иерархия, потом красота.