Отступы ломают мобильную верстку чаще, чем кажется: 5 правил, которые спасают
Отступ — это не «красивый воздух», а инструмент для ритма. Если его ставить наугад, интерфейс начинает расползаться: блоки теряют связь, текст выглядит тяжелым, а кнопки — слишком далеко от контента.
• Держите одну систему шагов: 4, 8, 12, 16, 24. Когда размеры случайные, макет быстро превращается в набор исключений.
• Вертикальные отступы важнее горизонтальных: на узком экране именно они помогают сканировать экран без лишнего напряжения.
• Не дублируйте расстояния у соседних блоков: если у одного элемента есть margin-bottom, у следующего не нужен такой же сверху.
• Проверяйте крайние случаи: длинные заголовки, две строки кнопок, карточки с разным объемом текста часто ломают аккуратную сетку.
Главная ошибка — делать отступы «на глаз» в каждом блоке отдельно. Лучше один раз собрать понятную шкалу и повторять ее во всех экранах: так интерфейс остается цельным, а правки занимают меньше времени.
Мобильная верстка: лучшее
@mobile_first_design_tips_ww
Отступы ломают мобильную верстку чаще, чем кажется: 5 правил, которые спасают
Этот пост опубликован в Telegram-канале Мобильная верстка: лучшее. Подписаться можно по ссылке: @mobile_first_design_tips_ww.