一.外边距合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上或下外边距也会发生合并。
接下来看一下这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距合并的塌陷</title>
</head>
<style>
.box{
background: blueviolet;
width: 300px;
height: 300px;
}
.in-box1{
background: red;
width: 200px;
height: 200px;
margin-top: 100px;
}
.in-box2{
background: blue;
width: 100px;
height: 100px;
margin-top: 50px;
}
</style>
<body>
<div class="box">
<div class="in-box1">
<div class="in-box2"></div>
</div>
</div>
</body>
</html>运行代码会发现出现以下结果：
这是因为紫色块外边距为0，红色为100px，蓝色为50px，三者最大为100px，所以合并为100px，这和我们预期的效果不符，那么如何来解决这种情况呢有以下三种方法。
二.解决办法
第一种：利用border
为父元素添加上边框，将css中的代码改为如下模样：
<style>
.box{
background: blueviolet;
width: 300px;
height: 300px;
margin-top: 0;
border-top: 1px solid blueviolet;
}
.in-box1{
background: red;
width: 200px;
height: 200px;
margin-top: 100px;
border-top: 1px solid red;
}
.in-box2{
background: blue;
width: 100px;
height: 100px;
margin-top: 50px;
}
</style>第二种: 利用padding
为父元素添加内边距
<style>
.box{
background: blueviolet;
width: 300px;
height: 300px;
margin-top: 0;
/* border-top: 1px solid blueviolet; */
padding: 1px;
}
.in-box1{
background: red;
width: 200px;
height: 200px;
margin-top: 100px;
/* border-top: 1px solid red; */
padding: 1px;
}
.in-box2{
background: blue;
width: 100px;
height: 100px;
margin-top: 50px;
}
</style>第三种：利用overflow：hidden
为父元素设置overflow：hidden
<style>
.box{
background: blueviolet;
width: 300px;
height: 300px;
margin-top: 0;
overflow: hidden;
/* border-top: 1px solid blueviolet;
padding: 1px; */
}
.in-box1{
background: red;
width: 200px;
height: 200px;
margin-top: 100px;
overflow: hidden;
/* border-top: 1px solid red;
padding: 1px; */
}
.in-box2{
background: blue;
width: 100px;
height: 100px;
margin-top: 50px;
}
</style>结果如下：
问题解决啦！
