Разбираем Margin Collapsing

Добрый день, уважаемые читатели!

Понимание, как происходит 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; 
}

 

Результат в браузере

css_11_7_14_1

 

Положительные отступы между смежными элементами

Вертикальные смежные 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_11_7_14_2

 

Смежные элементы с положительным и отрицательным отступами

Если один элемент имеет положительный отступ, а второй отрицательный, то результатом будет сумма отступов между элементами.

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_11_7_14_3

Если сумма отступов будет отрицательной, то последний элемент будет перекрывать первый. Посмотрим это на примере ниже.

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;
}

 

Результат в браузере

css_11_7_14_4

 

Схлопывание отступов родительского и дочернего элемента

Если родительский элемент не имеет 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;
}

 

Результат в браузере

css_11_7_14_5

 

Как убрать 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;
}

 

Результат в браузере

css_11_7_14_6

 

 

На этом все.

Подписывайтесь на рассылку 😉

 

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 11.07.2014