css解决外边距塌陷的7种方法

目录

什么是外边距塌陷:

解决方法

1，给父元素加边框

2，给父元素设置padding挤下去

 3，给父元素设置溢出隐藏，触发bfc机制：bfc全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。

4， 给父元素或者子元素增加浮动，让其脱离标准流

5，将父元素转变为行内块元素，display：inline-block 

6，给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

7，给父元素增加flex或者inline-flex 

---

什么是外边距塌陷:

• 外边距合并也叫作外边距塌陷,当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是外边距塌陷的现象

例：

解决方法

1，给父元素加边框

2，给父元素设置padding挤下去

 

 3，给父元素设置溢出隐藏，触发bfc机制：bfc全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。

4， 给父元素或者子元素增加浮动，让其脱离标准流

5，将父元素转变为行内块元素，display：inline-block 

6，给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

7，给父元素增加flex或者inline-flex