Добрий день, шановні читачі!
Розуміння, як відбувається collapsing (схлопування) margin-ів в CSS. може зробити життя web-розробнику набагато легше. Давайте подивимося, як працює схлопування margin-ів в CSS.
Горизонтальний і вертикальний Margin Collapsing
Горизонтальні margin-и ніколи не схлопиваются. А ось з вертикальними все не так просто.
Для розуміння, як вертикальні margin-и схлопиваются, створимо такий простий приклад.
Результат в браузері
Позитивні відступи між суміжними елементами
Вертикальні суміжні margin-и схлопиваются. Якщо два елементи мають позитивний вертикальний відступ, то в результаті відступом між елементами буде найбільший з двох відступів.
Результат в браузері
Суміжні елементи з позитивним і негативним відступами
Якщо один елемент має позитивний відступ, а другий негативний, то результатом буде сума відступів між елементами.
Результат в браузері
Якщо сума відступів буде негативною, то останній елемент буде перекривати перший. Подивимося це на прикладі нижче.
Результат в браузері
Схлопування відступів батьківського і дочірнього елемента
Якщо батьківський елемент не має border або padding. тоді батьківський і дочірній відступ схлопнуться і результатом буде більший з двох відступів.
Результат в браузері
Як прибрати margin collapsing батьківського і дочірнього елемента
Щоб прибрати схлопування, потрібно задати для батьківського елемента border або padding.
Результат в браузері
