Отступы в мобильной верстке: 6 ошибок, которые ломают весь интерфейс

Отступы в мобильной верстке: 6 ошибок, которые ломают весь интерфейс

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

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

Хорошая привычка — собрать шкалу отступов и использовать только ее. Для мобильных экранов особенно полезно держать отдельно: внутренние отступы блока, расстояния между блоками и отступы до края экрана. Тогда макет легче масштабировать и править без хаоса.

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