一、什么是CSS Vertical Margin Collapse
CSS垂直边距折叠指当相邻的两个块级元素上下边距相遇时，它们中间的边距会”折叠”（也称为”合并”）成单个边距。这种现象就是CSS Vertical Margin Collapse。
二、为什么会出现CSS Vertical Margin Collapse
出现这种情况的根本原因是，CSS的边距合并规则是，相邻的块级元素的上下外边距会合并为一个较大的外边距，这导致多个元素之间的边距不存在了，只留下了其中最大的边距。当相邻的两个块级元素上下边距重合时，就会发生这种合并现象。
三、哪些元素会出现CSS Vertical Margin Collapse
在正常情况下，只有左右外边距不会发生折叠，而上下外边距可能出现折叠。
1.相邻兄弟元素之间的折叠：
<div class="box1">
This is box1.
</div>
<div class="box2">
This is box2.
</div>
.box1,.box2{
margin-top:20px;
margin-bottom:30px;
}
这个例子中， box1 和 box2 这两个相邻的块级元素之间通过CSS设置了上下边距，由于它们的边距重叠，因此 box2 的上外边距会和 box1 的下外边距合并，实际上它们之间的外边距只有 30px 而不是 50px。
2.父元素和第一个子元素之间的折叠：
<div class="parent">
<div class="child">This is child1.</div>
<div class="child">This is child2.</div>
</div>
.parent{
margin-bottom:10px;
}
.child{
margin-top:20px;
}
由于子元素的边距重叠，父元素的下外边距和第一个子元素的上外边距会合并为单个的外边距。这个例子中， parent 元素的下外边距是 10px，但是由于合并的边距，它看起来只有 20px，而不是 30px。
3.兄弟元素和祖先元素之间的折叠：
<div class="grand-parent">
<div class="parent">
<div class="child">This is child1.</div>
<div class="child">This is child2.</div>
</div>
</div>
.grand-parent{
margin-top:40px;
}
.parent{
margin-top:20px;
}
.child{
margin-top:10px;
}
在这个例子中，grand-parent 元素设置了 40px 的上外边距，父元素 parent 设置了 20px 的上外边距，而 child1 元素设置了 10px 的上外边距。由于边距重叠，实际上grand-parent和parent之间的外边距只有20px，而parent和child1之间的外边距只有10px
四、如何避免CSS Vertical Margin Collapse
1.使用padding代替margin
通过使用padding代替margin，可以避免元素的上下外边距折叠。由于padding会覆盖内容，因此它不能完全代替margin。
2.使用定位元素避免折叠
如果将第一个元素相对于父元素进行定位，可以防止父元素和第一个元素之间的垂直边距折叠。同理，将最后一个元素的底部边缘与父元素的底边缘相对齐，也可以避免父元素和最后一个元素之间可能出现的垂直边距折叠。
3.使用border-top或者border-bottom来代替外边距
另一个方法是，使用 border-top 或 border-bottom 代替 margin，这样就避免了边距合并的问题。这个方法要求在元素之间加入分割线，因此并不适用于所有情况。
五、总结
CSS Vertical Margin Collapse是前端开发中常见的问题, 合理地使用padding，定位元素或border，可以避免margin collapse带来的影响。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/206264.html
微信扫一扫 
支付宝扫一扫 