外边距塌陷问题的解决办法

会导致外边距塌陷的两种情况

情况一：两个兄弟盒子，上面的盒子设置了margin-bottom,下面的盒子设置了margin-top,实际中会取值较大的那个属性值显示在网页中。这种情况一般较为少见。这两个属性只设置一个即可解决。

情况二：嵌套盒子（父元素与子元素）间的外边距塌陷（发生在垂直方向上的外边距合并，注意是垂直方向）

解决情况二的外边距塌陷一共有三种方法

方法一：给父元素加边框border

方法二：给父元素加内边距padding以达到类似效果

方法三：给父元素设置overflow:hidden;