(这是我第一篇博客,排版不好多有见谅)
外边距合并也叫作外边距塌陷,那什么是外边距塌陷?
满足以下条件就会产生外边距塌陷现象:
1,子元素在父元素里面
2,子元素中有margin-top或者margin-bottom值
此时已经产生外边距塌陷
![](https://img-blog.csdnimg.cn/d85de2eed2874b0593e000ff71bfda5b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JCM5paw5bCP55m9772e772e,size_20,color_FFFFFF,t_70,g_se,x_16)
那么该怎么解决呢,个人认为有七种方式:
第一种:给父元素增加内边距padding值,如图所示:
![](https://img-blog.csdnimg.cn/653bec73b0bd47b49abe05a9d9a1fadf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JCM5paw5bCP55m9772e772e,size_20,color_FFFFFF,t_70,g_se,x_16)
第二种方式:父元素增加边框border值,如图所示:
![](https://img-blog.csdnimg.cn/c3517b0e7c9e4f04a711babdc73fbe1e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JCM5paw5bCP55m9772e772e,size_20,color_FFFFFF,t_70,g_se,x_16)
第三种方式:父元素增加overflow:hidden,如图所示:
![](https://img-blog.csdnimg.cn/108da17edd7f4979bc1ac471f8e3a412.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JCM5paw5bCP55m9772e772e,size_20,color_FFFFFF,t_70,g_se,x_16)
第四种方式:给父元素或者子元素增加浮动,让其脱离标准流都可以,如图所示:
![](https://img-blog.csdnimg.cn/daecc94569324ad39d3bb260f04d7daa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JCM5paw5bCP55m9772e772e,size_20,color_FFFFFF,t_70,g_se,x_16)
第五种:将父元素转变为行内块元素,display:inline-block,如图所示:
![](https://img-blog.csdnimg.cn/e959d429fc2b40efab1f22e35e0b1860.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JCM5paw5bCP55m9772e772e,size_20,color_FFFFFF,t_70,g_se,x_16)
第六种:给父元素或者子元素定位都可以,原理同样是使其脱离标准流,不过只能用绝对定位和固定定位,如图所示:
![](https://img-blog.csdnimg.cn/e6091db6a77f454195e9f652690612eb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JCM5paw5bCP55m9772e772e,size_20,color_FFFFFF,t_70,g_se,x_16)
![](https://img-blog.csdnimg.cn/de0c657b86994ff0b6012e26bc53ffb6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JCM5paw5bCP55m9772e772e,size_20,color_FFFFFF,t_70,g_se,x_16)
第七种:给父盒子增加flex或者inline-flex,如图所示:
![](https://img-blog.csdnimg.cn/32af2b87e8af4353ad395016594fafb6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6JCM5paw5bCP55m9772e772e,size_20,color_FFFFFF,t_70,g_se,x_16)
好了,以上就是解决外边距塌陷的七种方法,如果还有其他方法,本人愿意请教。
在最后,给大家附上我前几天问大佬该问题,大佬给我的回复
来自大佬 CSDN专家-天际的海浪 的对于此问题的回复
让元素形成BFC的布局就可以解决外边距塌陷
BFC全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。
BFC的规则或者说是特点
1.独立且隔离的一个区域
2.里面的盒子垂直排列
3.属于同一个BFC相邻的俩个盒子(父子关系 相邻的兄弟关系)会有内边距重叠
4.BFC的区域不会与float重叠;
5.计算BFC的高度时,浮动元素也参与计算。
创建BFC(解决方案):
1、border-top:1px solid;(这个解决方法最好,但它其实并不是BFC,相当于加了一堵墙不让margin-top冲出去。下面的 2-6 都是BFC,虽然可以解决问题,但有一些副作用,很有可能会影响原来元素的功能,比如父元素本来不应该浮动,虽然你设置浮动之后解决margin塌陷但是使得元素本来的正常功能受到影响)
2、浮动元素(元素的 float 不是 none)
3、绝对定位元素(元素的 position 为 absolute 或 fixed)
4、行内块元素
5、overflow 值不为 visible 的块元素
6、弹性元素(display为 flex 或 inline-flex元素的直接子元素)