<b>4 правила отступов в мобильной верстке, которые спасают от переполнения экрана</b>

<b>4 правила отступов в мобильной верстке, которые спасают от переполнения экрана</b>

На узких экранах отступы работают не как на десктопе. Лишние пиксели съедают полезное пространство, а неправильные внутренние поля ломают сетку и читаемость.

— Внешние отступы между блоками делайте кратными 8 px. Это создаёт ритм и упрощает выравнивание по модульной сетке без дробных значений.

— Горизонтальные внутренние отступы контейнера фиксируйте в 16–20 px. Меньше — текст прилипает к краям, больше — строка сжимается до нечитаемой ширины.

— Межстрочный интерфейсный интервал (между кнопками, карточками) держите не менее 12 px. Меньшее расстояние провоцирует ложные нажатия и повышает когнитивную нагрузку.

— Учитывайте safe area на монобровях и скруглениях экранов. Критичный контент должен отстоять от края минимум на 20–24 px, чтобы не попадать под жесты системы.

Проверяйте верстку на устройстве с 320 px ширины. Если там не появляется горизонтальный скролл и все элементы комфортно нажимаются палец — отступы выстроены верно.