margin不起作用的原因:margin collapse margin折叠又叫margin坍陷
2017-01-22 21:49

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>

效果如下:

margincollapse.png

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

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

.firstmargin{
    margin-bottom:50px;

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

效果如下:

margincollapse2.png

可以看到,第二个元素具有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>

效果如下:

margincollapse3.png

第一个子元素的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;
}

效果如下:

margincollapse4.png

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

margin collase(margin坍陷)结语

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



原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(805)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1