一，什么是外边距折叠？
在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。
关键字：毗邻、两个或多个、垂直方向和普通流
毗邻
毗邻说明了他们的位置关系，没有被padding、border、clear和line Box分隔开。
两个或多个
两个或多个盒子是指元素之间的相互影响，单个元素不会存在外边距叠加的情况。
垂直方向
只有垂直方向的外边距会发生外边距叠加。水平方向的外边距不存在叠加的情况。
普通流(in flow)
只要不是float、absolutely positioned和root element时就是in flow
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.block {
width: 100px;
height: 100px;
background-color: lightBlue;
}
.top {
margin-bottom: 20px;
}
.bottom {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="block top"></div>
<div class="block bottom"></div>
</div>
</body>
</html>
如果你不了解外边距折叠，那么你会认为：间距 = top块的margin-bottom + bottom块的margin-top ＝20px + 30px = 50px
然而实际情况是:
这就是外边距折叠
二，什么时候会发生外边距折叠？
存在两种情况：一是父子外边距叠加；二是兄弟外边距叠加。
- 普通流中的块级元素（没有border-top、没有padding-top）的margin-top和它的第一个普通流中的子元素（没有clear）发生margin-top叠加
- 普通流中的块级元素（height为auto、min-height为0、没有border-bottom、没有padding-bottom）和它的最后一个普通流中的子元素（没有自身发生margin叠加或clear）发生margin-bottom叠加
- 如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素，那么它自身的外边距会发生叠加
三，外边距折叠后的大小
1.两个相同大小的正数：取某个外边距的值。即30px与30px发生折叠，折叠后的值为30px。2.两个不同大小的正数：取较大的外边距的值。即30px与20px发生折叠，折叠后的值为30px。
3.一正一负：取正数与负数的和。即30px与-20px发生折叠，折叠后的值为10px。
4.相同大小的负数：同相同大小正数。-30px与-30px折叠，折叠后为-30px。
5.不同大小负数： 取绝对值较大的负数。-30px与-20px折叠，折叠后为-30px。
四，如何避免外边距折叠
- 浮动元素不会与任何元素发生叠加，也包括它的子元素
- 创建了BFC的元素不会和它的子元素发生外边距叠加
- 绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
- inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
