关于margin塌陷问题（失效）

产生原因：

1. 同级元素垂直方向：一个设置margin-top 一个margin-bottom，产生相遇后只显示大的margin；                                        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        
2. 父子元素塌陷：父子元素之间也会出现margin塌陷，
   1. 父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。
   2. 本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距50，会带着父级元素一起掉下来（父元素的上边距0塌陷到了子元素的上边距50里面）。

解决方法：

1. 同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。                                                                                                                                                
2. 父子元素：
   1. 让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；
   2. 更加常用的方法是：父子盒模型之间的距离就不要用子元素的margin去设置，而是用父元素的padding挤出来。

注：水平方向没有margin塌陷。