margin collapse（margin坍陷）

两个块状元素的margin-top,和margin-bottom有时候会合并(折叠)成一个margin值，这个margin值取margin-top，margin-bottom中较大的值，这种现象叫做“margin坍陷”。

margin collaspe发生的三种状况

1，相邻的兄弟元素间发生margin坍陷

.mmcont{
    background: #f1f1f1;
    border:1px solid #bababa;
    line-height:50px;
    font-size: 13px;
}
.firstmargin{
    margin-bottom:50px;
}
.nextmargin{
    margin-top:20px;
}


<div class="mmcont firstmargin">
margin-bottom:50px;
</div>
<div class="mmcont nextmargin">
    margin-top:20px;
</div>

效果如下：

两个div之间的距离发生了margin坍陷，本来应该是70px，现在成了50px。

两个兄弟元素之间只有一种情况下不会发生margin坍陷，那就是第二个div具有float样式。

.firstmargin{
    margin-bottom:50px;

}
.nextmargin{
    margin-top:20px;
    float:left;
}

效果如下：

可以看到，第二个元素具有float样式时，两个margin值并没有发生坍陷现象，中间的距离是50+20=70px。

父元素和第一个或最后一个子元素发生margin坍陷

.mmcont{
    background: #f1f1f1;
    line-height:50px;
    font-size: 13px;
}
.firstmargin{
}
.nextmargin{
    margin-top:40px;
}
.nextchild{
    margin-top:40px;
}

<div class="mmcont firstmargin">
    我没有margin值
</div>
<div class="mmcont nextmargin">
    <div class="nextchild">
        first-child的marginTop:40px;
    </div>
</div>

效果如下：

第一个子元素的margin-top和父元素的margin-top两个margin值发生坍陷，本来两个加起来应该是80px，现在发生坍陷变成了40px。

父元素和子元素的坍陷好避免，只要父元素有下面一个条件就能避免坍陷：

@1，有border，

@2，有padding，

@3，或者父元素和子元素之间有inline的元素，这个其实就不能算第一个子元素了。

我们常用的清除margin坍陷的办法是前面两种，一是用margin，二是有padding值。

一个没有border，padding，inline元素的空block元素的marginTop和marginBottom发生margin collapse

<div class="mmcont firstmargin">
   我没有margin值
</div>
<div class="middlemargin"></div>
<div class="mmcont nextmargin">
    我没有margin值
</div>

.mmcont{
    background: #f1f1f1;
    line-height:50px;
    font-size: 13px;
}
.firstmargin{
}
.nextmargin{
}
.middlemargin{
    margin-top:50px;
    margin-bottom:50px;
}

效果如下：

中间的空div元素的上下两个margin值发生margin坍陷，所以第一个和第三个div中间的距离变成50px，而不是100px。

margin collase(margin坍陷)结语

margin坍陷是布局中常发生的现象，但是注意一点，float和absolute定位的元素不会发生margin坍陷。margin坍陷在兄弟元素之间可以作为一个特性来使用，父元素和子元素之间的margin坍陷可以用border或者padding值来解决，空元素的margin，正常布局一般不会使用，可以不用考虑。