Що таке злиття відступів у CSS

Злиття відступів — це функція CSS, де вертикальні відступи сусідніх блоків зливаються (тобто, вони не підсумовуються, а береться більший).

Ця функція працює лише з вертикальними відступами (margin-top, margin-bottom) і може викликати неочікувані візуальні ефекти.

Приклад злиття відступів

html

<div class="block1">...</div>
<div class="block2">...</div>

css

.block1 {
  margin-bottom: 30px;
}

.block2 {
  margin-top: 50px;
}

Що буде відображено між блоками?

50px, а не 80px. Тому що відступи злилися (був взятий більший).

Сусідні вертикально розташовані блоки
Коли margin-bottom одного елемента межує з margin-top іншого.
Працює лише вертикально.
Батьківський елемент і перший/останній нащадок
Якщо в батьківського елемента немає padding, border, inline content тощо.
Відступ першого/останнього нащадка зливається з margin батьківського елемента.
Порожні блоки
Якщо блок порожній, верхні і нижні відступи зливаються в один.

Важливо:

Злиття відступів працює лише вертикально і лише для блочних елементів у нормальному потоці.

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?