标准文档流中，竖直方向的margin不叠加，以较大的为准。
Document
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
overflow: hidden;
}
.p1{
width: 200px;
height: 100px;
background-color: orange;
margin-bottom: 40px;
}
.p2{
width: 200px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
运行结果
此时可以看到第一个p标签和第2个p标签之间的距离只有40px,虽然第一个div的margin-bottom: 40px;第二个div的margin-top: 30px;。但是竖直方向上margin的值不会叠加，以较大为准，所以间距为40px。
这就是margin的塌陷现象。这种情况存在于标准流中。
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：
设置两个p标签分别为float：left。此时2个p标签之间的距离就为70px。
