1、什么是外边距重叠
margin-college称作外边距重叠。在CSS中，相邻的两个盒子（可能是兄弟关系或者祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，因而所结成的外边距称为折叠外边距。
2、外边距重叠的例子
首先我们准备两个div盒子（兄弟关系），代码如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>外边距重叠</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
代码运行后，在页面两个盒子在页面中的显示如下图所示。
给红色的盒子设置一个margin-bottom为100px。
.box1 {
margin-bottom: 100px;
}
此时的两个盒子之间会有100px的间距，如下图所示。
再给橙色的盒子设置一个margin-top为100px。
.box2 {
margin-top: 100px;
}
按正常的理解，此时两个盒子之间的间距应该为200px，但是它们之间的间距仍然是100px，如下图所示。
以上就是一个外边距重叠的简单例子。因为红色盒子的margin-bottom和橙色盒子的margin-top结合成了一个新的外边距，它们之间的间距不是200px,而是为新的外边距的值，也就是100px。
3、折叠结果计算原则
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个相邻的外边距一正一负时，折叠结果是两者的相加的和
2364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
