前端笔记之margin塌陷现象

margin塌陷现象

在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部，这就是margin塌陷现象。margin塌陷有以下两种情况。注意：水平方向的 margin 没有塌陷现象。

同级元素塌陷： 上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。如下示意图：

父子元素塌陷： 父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。
如下图：父元素设置了margin-top ：40px，子元素设置了margin-top ：50px。呈现出来的父元素与上一个元素的间距是50px。

再如：本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。

解决 margin 塌陷问题的方法

①同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

②父子元素：
让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；
更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。