margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。
1. 同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距离是较大的那个值。
首先写两个盒子box1，box2并为其设置样式。
<!--css部分-->
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
width: 200px;
height: 200px;
background-color: tomato;
}
<!--html部分-->
<div class="box1">这是box1</div>
<div class="box2">这是box2</div>
效果图如下:
现在对box1设置margin-bottom:20px，对box2设置margin-top：100px;
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: tomato;
margin-bottom: 100px;
}
正常情况下我们会认为两个盒子的间距应该为上下边距相加为120px，但事实并非如此。
由上图清晰可见两个盒子之间的间距为100px，并不是两个盒子上下边距之和，这时我们使用F12打开控制台可见如下图现象：
盒子box1的下边距依然存在，只是不显示了，由此可见边距小的塌陷到了边距值大的值内部，所以间距为box2的边距100px。
2. 父子元素塌陷：父子元素之间也会出现margin塌陷，（1）父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。（2）本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来（父元素的上边距0塌陷到了子元素的上边距50里面）。
<!--css部分-->
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: tomato;
}
<!--html部分-->
<div class="box1">
<div class="box2"></div>
</div>
效果图如下：
如果我们给box1设置margin-top: 20px，box2设置margin-top: 50px，这时效果如下：
由此可见：父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。
如果我们只给子元素设置margin-top: 50px，这时效果如下：
由此可见：本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来（父元素的上边距0塌陷到了子元素的上边距50里面）。
解决方法：
（1）同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
（2）父子元素：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用子元素的margin去设置，而是用父元素的padding挤出来。
注：水平方向没有margin塌陷。
