🤔 Что происходит при схлопывании границ?

Это процесс в CSS, когда вертикальные внешние отступы (margins) двух или более блоков объединяются в один. Это поведение касается только вертикальных отступов (margin-top и margin-bottom) и не касается горизонтальных (margin-left и margin-right).

🚩Почему это нужно?

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

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

Если у одного блока снизу есть margin-bottom, а у другого блока сверху есть margin-top, то итоговый отступ между этими блоками будет равен большему из двух значений, а не их сумме. Если у элемента задан margin-top и он находится первым в контейнере, его верхний отступ может схлопнуться с верхним отступом контейнера. Если у элемента установлен margin-bottom и он является последним в контейнере, его нижний отступ может схлопнуться с нижним отступом контейнера. В этом примере между блоками будет отступ не 50px (20px + 30px), а 30px, потому что сработает схлопывание границ и возьмется большее значение.

<!DOCTYPE html>
<html>
<head>
    <style>
        .block1 {
            margin-bottom: 20px;
            background-color: lightblue;
        }
        .block2 {
            margin-top: 30px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="block1">Блок 1</div>
    <div class="block2">Блок 2</div>
</body>
</html>

🚩Когда схлопывание границ не происходит

🟠Если элементы имеют display:flex или display:grid.
🟠Если между элементами есть элемент с padding или border.
🟠Если у одного из элементов установлено свойство overflow со значением отличным от visible.
🟠Если один из элементов плавающий (float).

Ставь 👍 и забирай 📚 Базу знаний