两个块状元素的margin-top,和margin-bottom有时候会合并(折叠)成一个margin值,这个margin值取margin-top,margin-bottom中较大的值,这种现象叫做“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。
.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值。
<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坍陷是布局中常发生的现象,但是注意一点,float和absolute定位的元素不会发生margin坍陷。margin坍陷在兄弟元素之间可以作为一个特性来使用,父元素和子元素之间的margin坍陷可以用border或者padding值来解决,空元素的margin,正常布局一般不会使用,可以不用考虑。