Добро пожаловать на десятый урок. Сегодня поговорим про отступы и выравнивания. На прошлом уроке мы уже столкнулись немного с отступами, а теперь поговорим об этом подробнее.

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

Как я и говорил ранее, у всех виджетов есть расширенные настройки, и они одинаковы для всех. Давайте создадим структуру. Выберем структуру Flexbox, возьмём эту, с двумя колонками, и в левую добавим какое-нибудь изображение. Выберем первое попавшееся. Вот это мне нравится.

Добавим к контейнеру. Перейдем в «Расширенные». Как вы видите, в «Макете» есть два поля: отступ снаружи и отступ внутри. Также у них есть поля: «Верх», «Право», «Низ», «Лево». Давайте к контейнеру добавим отступ снаружи сверху 100 пикселей, чтобы визуально отделить этот контейнер от другого и чтобы картинка не «прилипала».

Теперь перейдём к картинке. Также в «Расширенные», и добавим к картинке отступы снаружи по 30 пикселей со всех сторон. Как видите, отступ применился со всех сторон — 30 пикселей.

Давайте обнулим и добавим теперь отступы внутри. Также по 30 пикселей. Как видите, визуально оно в принципе ничем не отличается: что так, что так. Давайте добавим.

Так чем же всё-таки отличаются эти отступы? Чтобы понять, давайте добавим к изображению какой-нибудь фон. Перейдём в «Фон» и добавим цвет, например красный. Так, контейнер у нас растягивается на всю ширину. Так что добавим выравнивание по его центру.

Перейдём к изображению. Теперь видно, где какой отступ применился: отступ внутри виджета (красненьким подсвечен, так как мы задали фон красным) и отступ снаружи. Давайте отвяжем значение. Например, справа обнулим. Слева также. Здесь где-нибудь сверху. Вернём, как было.

Давайте ещё посмотрим в коде, как это выглядит. Обновим и перейдём на страницу.

Нажимаем F12 или «Исследовать элемент». Выбираем наш контейнер.

Вот он, наш контейнер. Видите? Margin подсвечено жёлтеньким. Внутренние — Padding — зелёным.

Теперь визуально понятно, где какой отступ. Вернёмся в редактор.

Так когда использовать какие отступы? Давайте возьмём пример из прошлого урока. Как вы помните, для этого контейнера мы использовали отступ внутри по 30 пикселей. Также здесь. Мы это использовали, чтобы элементы отошли от краёв контейнера.

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

Обычно отступ снаружи делают для того, чтобы отделить один элемент от другого. Давайте ещё добавим к этому отступ снаружи — 20 пикселей. А теперь давайте посмотрим, как это будет выглядеть в коде. Обновляем и переходим, посмотрим.

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

Вот, добавим: включим Flex. Давайте перейдём в редактор. И поэтому внутри контейнера между контейнерами так лучше не делать. Это распространённая ошибка.

Так, другой контейнер…

К этому контейнеру, основному — вот он, подсвечивается серым — нужно добавлять пробелы здесь. Например, нам надо, чтобы между контейнерами было расстояние 40 пикселей. Так и добавляем. Если добавить в колонку 40 пикселей, это будет вот так. Строка — это будет расположение, например такое. 40 пикселей.

Вернёмся к правильному. Одной из распространённых ошибок является неправильное использование отступов, что может привести к нежелательным результатам. Например, распространенная ошибка — делать отступы не у контейнера, а у виджета. Давайте на примере возьмём этот контейнер и уберём внутренний отступ. И добавим отступы к виджетам. Отступы снаружи сделаем по 30 пикселей. Давайте снизу обнулим. Для этого тоже здесь…

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

Вернёмся. Блок «Изображения». Вот так. Обновим.

Также отступы снаружи делают для того, чтобы отделить один элемент от другого. Например, вот этот контейнер или этот — от предыдущего. Например, здесь давайте зададим отступ снаружи сверху 100 пикселей. Как видите, у него ещё есть отступ внутри — 5%. Давайте обнулим и посмотрим, как оно поменяется. Например, если цветной контейнер, то ему надо задавать отступы внутри. Давайте вернём по 5%. А чтобы отделить вот этот, например, контейнер, то мы задаём отступ снаружи.

Ещё поговорим немного о расположении элементов внутри контейнера. Давайте посмотрим на наш контейнер с заголовками и поменяем направление главной оси для наглядности. Уберём No Wrap.

Каждый элемент можно сделать отдельно. Например, возьмём первый заголовок. В «Расширенные», и добавить ширину, например «Во всю ширину». Он растягивается на всю ширину контейнера. Например, «Заголовок 2» возьмём и сделаем «Произвольно». В процентах, например, давайте 50%.

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

Также каждый элемент можно выровнять отдельно от других. В начале по умолчанию (вот — «Начало»). Давайте выберем третий заголовок. По центру его поставить, в конце или «Растянуть». Так же он растягивается, как и первый, — по ширине контейнера. Удалим эти, ненужные. Возьмём и поставим его, например, в середину. Этот — в конце. А этот оставим в начале.

Также можно поменять местами и поставить в начало или в конец. А мы сделаем по умолчанию. Уберём этот, будет он у нас на втором месте.

Есть ещё настройка «Произвольно». Это, например, добавляем единицу, она ставится в конец. Или минус один — будет ставиться в начало. Это то же самое, что эти две настройки. Не знаю, для чего она нужна. Так что я этим не пользуюсь.

А теперь перейдём к настройке размера. Если вы прочитали из дополнительных материалов про флексы, то будет понятно. Если нет, то настоятельно рекомендую почитать. Например, давайте добавим в этот контейнер кнопку. И в эти тоже. Добавим сюда и сюда.

А теперь для наглядности давайте этот текст чуть-чуть уменьшим. Этому тексту добавим немножко (скопируем и вставим для наглядности), а этот оставим без изменений.

Теперь я хочу, чтобы кнопка всегда «прижималась» к низу контейнера при любом содержимом. Для этого мы заходим в контекст, в «Расширенные», и добавляем настройку Grow. Текст растягивается, и кнопка «прижимается» к низу контейнера. Так же сделаем у этого. Нажимаем Grow — растягивается. И для этого так сделаем. Теперь кнопка при любом содержимом будет всегда «прижиматься» к низу.

Давайте посмотрим на изменения. Как это будет на сайте выглядеть. Как видите, всё аккуратненько. Текстовый блок растягивается.

Сегодня мы посмотрели на отступы и выравнивание элементов. Отступы и внутренние отступы являются важными инструментами для создания профессионального и аккуратного дизайна.

На сегодня у меня всё. Увидимся на следующем уроке. Пока.