Как сделать отступы между блоками в html

Как уменьшить (увеличить) отступ у блока?

Изменить отступы между блоками можно указав подходящее значение в самом низу Настроек блока:

Сохраните изменения и опубликуйте страницу для вступления изменений в силу.

Похожие вопросы

• Как добавить ссылку на конкретное место на странице (якорь)?
• Как добавить кнопку?
• Как добавить свой HTML, CSS или Javascript-код?
• Как сделать всплывающее окно?
• Как добавить видео?

Этот ответ был вам полезен?

Просмотры: 30327

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc

Схлопывающиеся margin

Вертикальные margin у соседних элементов объединяются между собой, что известно под термином «схлопывающиеся margin». Само схлопывание действует на два соседних блока или родительский и дочерний блоки, при этом примыкающие отступы не суммируются, а комбинируются в один.

Для margin слева и справа схлопывание никогда не применяется.

Схлопывание margin у соседних элементов

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

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

В примере 1 два блока располагаются один под другим, при этом у первого блока отступ снизу равен 20px, а у второго блока отступ сверху равен 10px.

Пример 1. Схлопывание margin

Результат данного примера показан на рис. 1. Расстояние между двумя блоками будет равно не 30 пикселей, как многие ожидают, а 20 пикселей, потому что выбирается большее значение из двух margin .

Рис. 1. Вертикальное расстояние между блоков

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

На рис. 2 приведено схематическое изображение результата схлопывания margin .

Рис. 2. Схлопывание margin

Если один из margin отрицательный, то в этом случае происходит их складывание по правилам математики:

x + (-y) = x – y

Если один из margin отрицательный, тогда margin вычитаются.

На рис. 3 схематично приведено поведение блоков, когда верхний margin у нижнего блока отрицательный.

Рис. 3. Один margin отрицательный

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

Пример 2. Отрицательный margin

Результат данного примера показан на рис. 4. Расстояние между двумя блоками считается как отступ снизу у верхнего блока минус отступ сверху у нижнего блока (20px-10px). В итоге расстояние будет равно 10 пикселей.

Рис. 4. Вертикальное расстояние между блоков

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

Так, если отступы равны -10px и -20px, то итоговое значение будет -20px. При этом элементы будут частично перекрываться (рис. 5).

Рис. 5. Отрицательные margin

Пустые элементы

Для пустых элементов, внутри которых нет никакого содержимого, margin-top и margin-bottom также комбинируются в один по тем же правилам, что и для соседних блоков. При этом должен ещё соблюдаться ряд условий:

• для элемента не должен быть задан padding сверху или снизу;
• для элемента не должен быть задан border сверху или снизу;
• высота элемента не должна быть указана через свойство height или min-height.

Одновременное сочетание всех этих условий (нет содержимого, не указана высота, padding и border ) встречается довольно редко, так что многие веб-разработчики никогда и не сталкиваются с подобным поведением. В примере 3 пустой блок применяется в качестве разделителя между цветными блоками.

Пример 3. Пустой блок

Результат данного примера показан на рис. 6. Расстояние между двумя цветными блоками определяется пустым блоком с классом hollow . У этого блока верхний и нижний margin объединяются в один, общая высота которого будет 20 пикселей.

Рис. 6. Схлопывание margin у пустого блока

Вложенные элементы

Также схлопываются margin самого блока с margin у его первого и последнего дочерними элементами. Более точно комбинируется так:

• margin-top родителя с margin-top его первого дочернего элемента;
• margin-bottom родителя с margin-bottom его последнего дочернего элемента.

На рис. 7 схематично показано что margin у дочернего элемента располагается не внутри родителя, а выходит за его пределы.

Рис. 7. margin у дочернего элемента

Такое поведение часто можно встретить у заголовков, вроде или , которые идут первыми в блоке. У этих заголовков уже содержится margin-top и margin-bottom по умолчанию и он, объединяясь с родительским margin , влияет на отступы всего блока (пример 4).

Пример 4. margin у заголовка

Текст снизу

Результат данного примера показан на рис. 8. margin у выходит за пределы блока и задаёт внешние отступы до и после блока.

Рис. 8. margin у дочернего элемента

Отмена схлопывания margin

Схлопывание не всегда требуется при вёрстке страницы, а в некоторых случаях вообще «ломает» дизайн. Поэтому следует знать, в каких случаях схлопывание не работает.

Схлопывание margin не срабатывает:

• для элементов с абсолютным позиционированием, т. е. таких, у которых position установлено как absolute или fixed ;
• для обтекаемых элементов (для них свойство float задано как left или right );
• для строчных или строчно-блочных элементов (для них свойство display задано как inline или inline-block );
• для флекс-элементов (у родителя которых свойство display задано как flex или inline-flex );
• для элемента .

Схлопывание не действует на дочерние элементы:

• если у родителя значение overflow задано как auto , hidden или scroll ;
• если у родителя на стороне схлопывания задано свойство padding;
• если у родителя на стороне схлопывания задано свойство border.

Учтите, что свойства padding и border должны иметь размер больше нуля, к примеру, 1px.

Возьмём пример 4 и доработаем его, чтобы margin у заголовка работал внутри блока. Для этого к родительскому блоку добавляем свойство padding со значением 0.1px. На экране такая величина будет незаметна, но браузеры её понимают и схлопывание margin отменяют (пример 5).

Пример 5. Отмена схлопывания margin

Текст снизу

Результат данного примера показан на рис. 9.

Рис. 9. margin у дочернего элемента

Для отмены схлопывания у дочерних элементов можно использовать один из вариантов.

.block < /* 1. Ненулевой padding сверху и снизу */ padding: 0.1px 0; /* 2. Скрываем всё за пределами блока */ overflow: hidden; /* 3. Прозрачная линия сверху и снизу */ border-top: 1px solid transparent; border-bottom: 1px solid transparent; >

Для соседних элементов схлопывание margin отменять, как правило, нет необходимости, поскольку результат достаточно предсказуем — надо только помнить о поведении margin или включать margin-top или margin-bottom лишь для одного элемента. В примере 6 расстояние между блоков регулируется значением margin-bottom у block1 . Здесь этот margin единственный, поэтому никакого объединения не происходит и вертикальный промежуток между блоков равен значению margin-bottom .

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

Для полноты картины приведём несколько вариантов, когда схлопывание margin у соседних блоков не работает. Данный стиль можно добавить к каждому блоку или только к одному. Ширина элемента с float определяется содержимым элемента, поэтому надо явно задать ширину блока, равную 100%. За счёт этого не ломается вёрстка, потому что нет места для обтекания элемента.

/* 1. Использование float */ .block < float: left; /* Обтекаемый элемент */ width: 100%; /* Занимает всю доступную ширину */ box-sizing: border-box; /* Ширина не учитывает padding и border */ >

Ширина строчно-блочных элементов также определяется их содержимым, поэтому данный вариант похож на предыдущий.

/* 2. Использование строчно-блочных элементов */ .block < display: inline-block; /* Строчно-блочный элемент */ width: 100%; /* Занимает всю доступную ширину */ box-sizing: border-box; /* Ширина не учитывает padding и border */ >

Класс parent надо добавить к родителю наших блоков.

/* 3. Использование флексбоксов */ .parent < display: flex; /* Работаем с флексами */ flex-direction: column; /* Элементы выводятся друг под другом */ >

Простой способ задать отступы между flexbox элементами

Вариант 1 — отрицательный отступ для родительского блока

Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов .item и отрицательный отступ margin: 0 -5px для родительского контейнера .box .

CSS

.box < display: flex; margin: 0 -5px; >.item

HTML

 See the Pen NWGKWGJ by Denis (@deniscreative) on CodePen.dark

Вариант 2 — без отрицательного отступа с отступами по бокам

Не используем отрицательные отступы и не используем :first-child/:last-child . Задаем внутреннее поле для контейнера padding:5px и задаем отступы для дочерних элементов margin:5px . Таким образом мы получаем равномерный отступ 10px между дочерними элементами и от дочерних элементов до контейнера.

CSS

.box < display: flex; padding: 0 5px; >.item

HTML

 See the Pen Uniform distribution of blocks with flex 2 by Denis (@deniscreative) on CodePen.dark

Вариант 3 — фиксированная ширина с помощью calc()

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc() . Данный способ не совсем хорош для размещения флексбокс-элементов в несколько рядов, потому что элементы растягиваются по краям контейнера justify-content: space-between .

CSS

.box < display: flex; flex-wrap: wrap; justify-content: space-between; >.item < width: calc(1/3*100% - (1 - 1/3)*10px); margin: 0 0 10px; >

где 1/3 — это 3 колонки в ряд, и 10px — это ширина между колонками.

HTML

 See the Pen Uniform distribution of blocks with flex 3 by Denis (@deniscreative) on CodePen.dark

Вариант 4 — фиксированная ширина с помощью calc() с отступами по бокам

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc() . Но главное отличие от предыдущего варианта, что для дочерних элементов .item заданы отступы по бокам, а для родительского контейнера .box заданы отрицательные отступы как в первом примере. И таким образом, мы можем задать justify-content: flex-start; чтобы flexbox-элементы располагались равномерно слева направо.

Я чаще всего использую этот вариант, как наиболее универсальный и удобный для размещения любых flexbox-элементов.

CSS

.box < display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 -5px; >.item < width: calc(1/3*100% - 10px); margin: 5px; >

где 1/3 — это 3 колонки в ряд, и 10px — это ширина между колонками.

HTML

 See the Pen Uniform distribution of blocks with flex 4 by Denis (@deniscreative) on CodePen.dark

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

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…

Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…

Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить…

CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS…

Отступы

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

На этой странице

Как это работает

• Горизонтальные отступы между столбцами с использованием padding . Мы устанавливаем padding-right и padding-left для каждого столбца и используем отрицательное значение margin для смещения в начале и конце каждой строки для выравнивания содержимого.
• Начало отступа шириной в 1.5rem ( 24px ). Это позволяет нам сопоставить нашу сетку с масштабом отступов и интервалов полей.
• Отступы могут быть быстро отрегулированы. Используйте специфичные для контрольной точки классы отступов для изменения горизонтальных, вертикальных и сразу всех отступов.

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

Классы .gx-* могут использоваться для контроля горизонтальной ширины отступа. Родительские элементы .container или .container-fluid возможно тоже потребуется отрегулировать, если использовать более крупные отступы, чтобы избежать нежелательного переполнения. Например, в следующем примере мы увеличили заполнение с помощью .px-4 :

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

div class="container px-4"> div class="row gx-5"> div class="col"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div class="col"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div> div>

Альтернативное решение — добавить оболочку вокруг .row с помощью класса .overflow-hidden :

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

div class="container overflow-hidden"> div class="row gx-5"> div class="col"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div class="col"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div> div>

Вертикальные отступы

Классы .gy-* могут использоваться для контроля ширины вертикального отступа. Как и горизонтальные отступы, вертикальные отступы могут вызвать переполнение ниже .row в конце страницы. Если это происходит, вы добавляете оболочку вокруг .row с классом .overflow-hidden :

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

div class="container overflow-hidden"> div class="row gy-5"> div class="col-6"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div class="col-6"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div class="col-6"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div class="col-6"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div> div>

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

Классы .g-* могут использоваться для управления горизонтальнной шириной отступа. В следующем примере мы используем меньшую ширину отступа, поэтому добавление класса оболочки .overflow-hidden не требуется.

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

div class="container"> div class="row g-2"> div class="col-6"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div class="col-6"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div class="col-6"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div class="col-6"> div class="p-3 border bg-light">Пользовательские внутренние отступы колонокdiv> div> div> div>

Ряды столбцов с отступами

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

Колонка ряда
Колонка ряда
Колонка ряда
Колонка ряда
Колонка ряда
Колонка ряда
Колонка ряда
Колонка ряда
Колонка ряда
Колонка ряда

div class="container"> div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3"> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div class="col"> div class="p-3 border bg-light">Колонка рядаdiv> div> div> div>

Без промежутков между столбцами

Промежутки между столбцами в наших предопределенных классах сетки могут быть удалены с помощью .g-0 . С помощью этого класса можно удалить отрицательные margin из .row и горизонтальные padding из всех непосредственных дочерних столбцов.

Если нужно разместить элементы дизайна от края до края, то удалите родительский .container или .container-fluid .

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

.col-sm-6 .col-md-8
.col-6 .col-md-4

div class="row g-0"> div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div> div class="col-6 col-md-4">.col-6 .col-md-4div> div>

Изменение параметров отступов

Классы создаются из Sass карты $gutters , которая унаследована от Sass карты $spacers .

$grid-gutter-width: 1.5rem; $gutters: ( 0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, );