Чӣ тавр фатҳи канорҳо дар CSS?

Падшавани маржини (margin collapsing) — это явление в CSS, при котором вертикальные маржины двух или более соседних блоков объединяются в один маржин. Размер этого общего маржина определяется наибольшим значением из сливаемых маржинов.

Основные правила слипания:

• Сливаются только вертикальные маржины (margin-top и margin-bottom). Горизонтальные не сливаются.
• Сливаются только маржины соседних элементов, если между ними нет других элементов, padding, border или содержимого блока.
• Верхний маржин первого дочернего элемента сливается с верхним маржином его родителя, если между ними нет padding, border или другого содержимого.
• Нижний маржин последнего дочернего элемента сливается с нижним маржином его родителя, если между ними нет padding, border или другого содержимого.
• Верхние и нижние маржины пустого элемента могут сливаться между собой, если у него нет padding, border или содержимого.
• Если одна из сливаемых маржинов отрицательна, итоговый размер равен сумме положительного и отрицательного значений (или абсолютному значению, если оба отрицательны и сумма меньше нуля).

Пример:

<div class="box1">Элемент 1</div>
<div class="box2">Элемент 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

В этом случае вертикальное расстояние между box1 и box2 будет 30px (наибольшее из 20px и 30px), а не 50px.

Способы предотвращения слипания:

• Добавить padding или border между элементами.
• Создать новый блок форматирования (например, с помощью overflow: hidden, display: flow-root или плавающих элементов).
• Использовать display: inline-block, display: flex или display: grid для элементов.
• Использовать абсолютное позиционирование.