外边距塌陷解决方法

齐露

已于 2022-05-12 16:39:41 修改

阅读量179

点赞数

文章标签： css 前端

于 2022-05-12 14:24:10 首次发布

本文链接：https://blog.csdn.net/qi__lu/article/details/124727245

版权

本文详细介绍了CSS布局中常见的外边距塌陷问题，包括兄弟元素塌陷和父子元素塌陷。解决方法包括改变元素类型、使用浮动、设置BFC等。BFC（Block Formatting Context）是理解此问题的关键，它是一个独立的渲染区域，能防止内部元素影响外部元素。了解并掌握这些技巧对于优化网页布局至关重要。

摘要由CSDN通过智能技术生成

在这里插入图片描述
从上图可以看出来，只有两个连续的块级元素都设置上下外边距(marign-top 和 margin-bottom)的时候，会出现上下外边距合并的情况，这种情况就是塌陷

这种塌陷是兄弟元素塌陷，还有一种是父子元素塌陷（父元素的上边距为0，子元素的margin-top有值，会把父元素拉下去）。

兄弟元素塌陷

当出现兄弟元素塌陷的时候，真正的边距是取大值的，就是上一个元素的margin-bottom 与下一个元素的 margin-top 的数值对比，那个数值大，就取那个。

那么，怎么解决这个兄弟元素塌陷的问题呢？通过上边的图就知道，可以这样做：

把块级元素改为行内块元素
把块级元素改为浮动，当然记得给他们的父元素清除浮动，或者是让父元素overflow：hidden

父子元素塌陷

这种情况呢，一般尽量的给父元素设置 padding 或者 border ，代替给子元素设置margin

给父元素加border-top 或者 padding值，padding值代替子元素的margin
用BFC，盒子设置：
position:absolute
display:inline-block
float:left / right
overflow:hidden

题外话：触发BFC的条件

题外话：兄弟元素塌陷的第二种方法，把块级元素改为浮动，同时，给这对兄弟元素的父亲设置overflow：hidden
这种方法其实是用了BFC。

什么是 BFC？
BFC全称是Block Formatting Context。

BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。

body根元素
设置浮动，取值不包括none
设置定位position，取值为 absoulte 或者 fixed (fixed要结合top值或者其他三个方面的任何一个)
设置overflow，取值为hidden、auto 或者 scroll
行内块显示模式，inline-block
表格单元格，table-cell
弹性布局，flex
后边这三个总结一下，都是设置display的值，分别取值 inline-block 或者 table-call 或者 flex ，也可以取值grid，table，……