margin塌陷

什么是margin塌陷

在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

塌陷分为两种同级元素塌陷和父子元素塌陷。

同级元素塌陷（也叫margin合并）

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。

同级元素塌陷

父子元素塌陷

父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的
margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。

css

像上面的css样式，是不是以为p会距离demo的顶部有空间，其实不是这样的。

image.png

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

image.png image.png

解决方法

1.给父级设置边框或内边距(不建议使用) 因为会改变css样式 引起重排重绘
2.触发bfc(块级格式上下文),改变父级的渲染规则， 改变父级的渲染规则有以下四种方法,给父级盒子添加

• (1)position:absolute/fixed
• (2)display:inline-block;
• (3)float:left/right
• (4)overflow:hidden