Внутренние и внешние отступы: основные отличия

Разберемся, в чем разница между внутренними и внешними отступами, и когда использовать те или другие.

Смотрите видео:

https://vk.com/video-219751701_456239234

VK Видео | YouTube

Что такое внутренние отступы (Paddings)

Внутренние отступы создают пространство для контента внутри блока. В редакторе они отображаются зеленым цветом.

Например, изменяя параметры верхних и нижних внутренних отступов, мы видим, как появляется расстояние от границы блока до контента внутри него.


Внутренние отступы блока отображаются на холсте зеленым цветом
Внутренние отступы сверху и снизу у блока

Что такое внешние отступы (Margins)

Внешние отступы используются для создания пространства за пределами блока. В редакторе они отображаются желтым цветом.

Когда мы задаем внешние верхние и нижние отступы, появляется расстояние от границы блока до соседних блоков.


Внешние отступы блока отображаются на холсте желтым цветом
Внешние отступы сверху у блока

Рекомендации по использованию отступов

Советуем настраивать отступы следующим образом:

  • Внутренние отступы: для секций и контейнеров.
  • Внешние отступы: для расстановки объектов внутри секций и контейнеров.

Далее поясним на примерах, почему стоит делать именно так.

Вертикальные отступы: пример при работе с якорными ссылками

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

Проблема с внешними отступами

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

У блока задан верхний отступ

Но если в меню настроена якорная ссылка для перехода к этой секции, то возникнет проблема — при переходе по ссылке экран переместится к верхней границе секции, и контент прилипнет к верху экрана. Это выглядит плохо.

Переход по якорной ссылке к секции на опубликованном сайте — у секции нет отступа сверху

Решение

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

Вместо внешнего отступа настраиваем у блока внутренний отступ

Убираем внешний отступ и добавляем внутренний отступ сверху

Переход по якорной ссылке к секции на опубликованном сайте — у секции появился отступ сверху

Горизонтальные отступы

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

Задаем внутренние отступы у контейнера

Расстояния между элементами внутри блока

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

У элемента внутри блока задан внешний отступ слева

В некоторых случаях для создания расстояния между элементами можно также использовать параметр Gap в настройках авто-лейаута Flex.

Настройки отступов между элементами в авто-лейауте

В авто-лейауте задано вертикальное и горизонтальное расстояние между элементами 

Резюме

Правильное использование отступов:

  • Внутренние отступы (Paddings) — для секций и контейнеров, чтобы создать пространство между границами блока и контентом. Особенно важно при работе с якорными ссылками.
  • Внешние отступы (Margins) — для мелких элементов внутри блоков.
  • Gap в авто-лейауте — еще один способ создания расстояний между элементами.