Добрый день, уважаемые читатели!
Понимание, как происходит collapsing (схлопывание) margin-ов в CSS, может сделать жизнь web-разработчику намного легче. Давайте посмотрим, как работает схлопывание margin-ов в CSS.
Горизонтальный и вертикальный Margin Collapsing
Горизонтальные margin-ы никогда не схлопываются. А вот с вертикальными все не так просто.
Для понимания, как вертикальные margin-ы схлопываются, создадим такой простой пример.
HTML
<div id="parent"> <div id="red"> <p>Red</p> </div> <div id="blue"> <p>Blue</p> </div> </div>
CSS
#parent{ background-color:yellow; width:300px; } #red { background-color:red; height:50px; } #blue { background-color:blue; height:50px; }
Результат в браузере
Положительные отступы между смежными элементами
Вертикальные смежные margin-ы схлопываются. Если два элемента имеют положительный вертикальный отступ, то в результате отступом между элементами будет наибольший из двух отступов.
CSS
#parent{ background-color:yellow; width:300px; } #red { background-color:red; height:50px; margin-bottom:30px; } #blue { background-color:blue; height:50px; margin-top:20px; }
Результат в браузере
Смежные элементы с положительным и отрицательным отступами
Если один элемент имеет положительный отступ, а второй отрицательный, то результатом будет сумма отступов между элементами.
CSS
#parent{ background-color:yellow; width:300px; } #red { background-color:red; height:50px; margin-bottom:30px; } #blue { background-color:blue; height:50px; margin-top:-20px; }
Результат в браузере
Если сумма отступов будет отрицательной, то последний элемент будет перекрывать первый. Посмотрим это на примере ниже.
CSS
#parent{ background-color:yellow; width:300px; } #red { background-color:red; height:50px; margin-bottom:30px; } #blue { background-color:blue; height:50px; margin-top:-40px; }
Результат в браузере
Схлопывание отступов родительского и дочернего элемента
Если родительский элемент не имеет border или padding, тогда родительский и дочерний отступ схлопнутся и результатом будет больший из двух отступов.
CSS
#parent{ background-color:yellow; width:300px; } #red { background-color:red; height:50px; } #blue { background-color:blue; height:50px; margin-top:30px; } #blue p{ margin-top:20px; background:green; }
Результат в браузере
Как убрать margin collapsing родительского и дочернего элемента
Чтобы убрать схлопывание, нужно задать для родительского элемента border или padding.
CSS
#parent{ background-color:yellow; width:300px; } #red { background-color:red; height:50px; } #blue { background-color:blue; height:50px; margin-top:30px; border:1px solid black; } #blue p{ margin-top:20px; background:green; }
Результат в браузере
На этом все.
Подписывайтесь на рассылку 😉