【前端】外边距合并问题 -- 嵌套盒子
css外边距重合指的是两个垂直相邻的块级元素，当上下两个margin相遇时，会产生重叠现象，且重叠后的margin为较大的那一个。
具体是怎么一回事呢，我们来直观的看一下：
- 首先把body的背景色设置为骚粉，方便观察，再新建三个俄罗斯套盒，分别是container – father – son，然后给他们的宽高分别设置为600600、400400、200*200，背景色分别设置为蓝、红、绿。margin和padding都初始化为0。效果如下图所示：
- 我们试着来给father这个盒子设置一个上边距，也就是margin-top，设置为30px，效果如下图所示：
注意了，是不是跟我们预想的不一样，按理说应该是father相对于container来说上面有一个30px的margin-top，但是现在确实他们三个盒子同时相对于body有一个margin-top了，这时候就是发生了外边距合并问题。
因为我们一开始就把三个盒子的margin都设置为零了，而且他们三个还有垂直相邻关系，所以他们的margin-top就统一成了最大的那个margin-top.
为了验证这个结论，我们再把son这个盒子的margin-top设置为60px,看下图：
很明显现在三个盒子的margin-top统一成了60px。
- OK，那我们继续，如何解决这种问题呢，有好几种方法。
第一种：可以给父元素添加一个padding值，这里可以添加一个padding-top，当然用这种方法的话，你的margin就得重新计算了。
第二种：给父元素设置一个overflow: hidden，这种方法对距离来说会更友好些。
我们来给container添加一个overflow: hidden
可以看到container与body之间的上边距已经消失了，因为超出container的部分已经被隐藏了（这个说法其实我不太理解，添加padding来把子盒子挤下去这个我是理解的，但是如果超出部分隐藏的话，为什么子盒子还是有这个margin呢？不过我还是把它理解为就是为了解决这个问题，所以规定成这样的。）。 - 我们再来给father添加一个overflow: hidden，看一下：
这一下就很清楚了，就是我们代码中表示的意思。
最后贴上源码：
<!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;
}
body {
background-color: pink;
}
.container {
height: 600px;
width: 600px;
background-color: blue;
/* padding-top: 1px; */
overflow: hidden;
}
.father {
height: 400px;
width: 400px;
background-color: red;
margin-top: 30px;
overflow: hidden;
}
.son {
height: 200px;
width: 200px;
background-color: green;
margin-top: 60px;
}
.above {
height: auto;
width: 333px;
border: 2px solid red;
padding: 9px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="father">
<div class="son">
</div>
</div>
</div>
<div class="above">
<h3>css外边距重合指的是两个垂直相邻的块级元素，当上下两个margin相遇时，会产生重叠现象，且重叠后的margin为较大的那一个。</h3>
</div>
</body>
</html>
