什么是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
网友评论