关于css的margin塌陷现象

由于偶然翻到了以前的笔记，记载的正好是css的margin塌陷现象。于是有了写在知乎上与大家分享讨论的想法。

在标准文档流中，竖直方向（记住是竖直方向，左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。

margin的塌陷现象分两种情况：1，兄弟关系的盒子 2 ，父子关系的盒子

1，兄弟关系的盒子margin塌陷的解决方法：

给上面的盒子加个margin-bottom（这个距离等于两个盒子之间的距离）或者给下面的盒子加个margin-top（这个距离等于两个盒子之间的距离）。

2 ，父子关系的盒子margin塌陷的解决方法：

给父盒子加上下边框或者给父盒子添加上下padding。