margin 的塌陷问题

盒子的塌陷问题也叫作重叠问题

1. 兄弟元素塌陷问题

兄弟元素之间，若上边元素设置了margin-bottom且下边元素设置了margin-top，最终两盒子之间的间距并不是两外边距之和，而是取两者之间较大者。

note :

• 垂直方向上外边距相撞时，取较大值
• 浮动元素的外边距不合并 代码如下：

效果如图：

2. 父子元素塌陷问题

（1）当父元素与子元素都设置了margin-top值，并且两个属性之间没有其他内容进行隔离时，会导致父元素与子元素的两个属性相遇发生margin塌陷问题。

（2）当父元素本身与上一个元素的距离是0时，子元素上如果设置了margin-top,则父元素会随着子元素一起掉下来。

左图是小盒子没有加margin-top的效果，右图是小盒子加margin-top的效果

解决方法：

①父元素设置overflow:hidden;

②父元素或者子元素设置float

③父元素设置border:1px solid transparent;

④父元素设置padding-top:1px;