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