Схлопування відступів (margin) у CSS, Vaden Pro

Бувають моменти, коли вертикальні відступи верхнього і нижнього margin приводять верстальника-початківця в подив. Розглянемо такий варіант на прикладі:

Верстальник очікує побачити таке:

Однак на практиці виходить зовсім інша картина:

І тоді постає питання: чому немає деяких відступів?

Відповідь на нього проста. Маржин відобразився саме так, як він був прописаний у CSS, а висновок відрізняється від очікуваного тільки тому, що відбулося так зване схлопування цієї властивості.

Схлопування маржин - це напливання граничних відступів один на одного.

Варто звернути увагу, що схлопування піддається тільки вертикальний margin. При цьому у горизонтального маржина такої особливості не спостерігається.

Як це виглядає практично?

Схлопування виглядає так, наприклад, у нас є картинка з підписом:

Всупереч очікуванням відступ між картинкою та її підписом не дорівнюватиме 35 px, більший маржин поглине менший, отже, картинку та її підпис розділить шлях у 25 px.

Дочірні елементи та їхні батьки

У такому випадку відступ від тега h1 і тега p буде дорівнює 30px. Отже, дочірній елемент, у якого більший відступ, потягне за собою і батька, а батьківський відступ зхлопнеться з дочірнім.

Єдиним варіантом, коли відступи сумуються є випадок, якщо вони мають різноіменні знаки (один має знак +, інший знак -)

Чим це допоможе?

Ця властивість вертикального margin стане в нагоді при розмітці тексту. Приміром якщо тегу p задати:

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

Коли схлопування не відбувається?

Схлопування не відбудеться, якщо:

Елемент має якийсь paddingабо border;
Блок є кореневим;
Блок або дочірній плаваючий елемент;
Блок має повну позицію;
Блок або дочірній елемент є малим.
У блока встановлено відмінний від стандартного контекст форматування.