Внутренние и внешние отступы: основные отличия
Разберемся, в чем разница между внутренними и внешними отступами, и когда использовать те или другие.
Смотрите видео:
Что такое внутренние отступы (Paddings)
Внутренние отступы создают пространство для контента внутри блока. В редакторе они отображаются зеленым цветом.
Например, изменяя параметры верхних и нижних внутренних отступов, мы видим, как появляется расстояние от границы блока до контента внутри него.
Внутренние отступы блока отображаются на холсте зеленым цветом Внутренние отступы сверху и снизу у блока
Что такое внешние отступы (Margins)
Внешние отступы используются для создания пространства за пределами блока. В редакторе они отображаются желтым цветом.
Когда мы задаем внешние верхние и нижние отступы, появляется расстояние от границы блока до соседних блоков.
Внешние отступы блока отображаются на холсте желтым цветом Внешние отступы сверху у блока
Рекомендации по использованию отступов
Советуем настраивать отступы следующим образом:
Внутренние отступы: для секций и контейнеров.
Внешние отступы: для расстановки объектов внутри секций и контейнеров.
Далее поясним на примерах, почему стоит делать именно так.
Вертикальные отступы: пример при работе с якорными ссылками
Если вы используете якорные ссылки в меню для навигации по странице, правильная настройка отступов сверху и снизу особенно важна.
Проблема с внешними отступами
Если мы поставим у секции внешний верхний отступ, то визуально контент будет расположен правильно — будет пространство между блоками.
У блока задан верхний отступ
Но если в меню настроена якорная ссылка для перехода к этой секции, то возникнет проблема — при переходе по ссылке экран переместится к верхней границе секции, и контент прилипнет к верху экрана. Это выглядит плохо.
Переход по якорной ссылке к секции на опубликованном сайте — у секции нет отступа сверху
Решение
Вместо внешнего верхнего отступа у секции используйте такой же внутренний отступ. В этом случае при переходе по якорной ссылке страница будет отображаться корректно, с правильным отступом от верха экрана.
Вместо внешнего отступа настраиваем у блока внутренний отступ
Убираем внешний отступ и добавляем внутренний отступ сверху
Переход по якорной ссылке к секции на опубликованном сайте — у секции появился отступ сверху
Горизонтальные отступы
Если вы хотите, чтобы контент не заполнял 100% ширины секции, не нужно ставить внешний отступ у контента. Вместо этого задайте внутренние отступы у секции или контейнера.
Задаем внутренние отступы у контейнера
Расстояния между элементами внутри блока
Внешние отступы можно использовать для мелких элементов внутри контейнера, чтобы задать расстояние между ними.
У элемента внутри блока задан внешний отступ слева
В некоторых случаях для создания расстояния между элементами можно также использовать параметр Gap в настройках авто-лейаута Flex.
Настройки отступов между элементами в авто-лейауте
В авто-лейауте задано вертикальное и горизонтальное расстояние между элементами
Резюме
Правильное использование отступов:
Внутренние отступы (Paddings) — для секций и контейнеров, чтобы создать пространство между границами блока и контентом. Особенно важно при работе с якорными ссылками.
Внешние отступы (Margins) — для мелких элементов внутри блоков.
Gap в авто-лейауте — еще один способ создания расстояний между элементами.
