如何解决外边距塌陷

最新推荐文章于 2023-12-14 17:18:41 发布

zch2846

最新推荐文章于 2023-12-14 17:18:41 发布

阅读量322

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/zch2846/article/details/131922550

版权

一、什么是外边距塌陷

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

如图：在这里插入图片描述
或者子元素在父元素内，且子元素中有margin-top或者margin-bottom值

要注意:外边距的塌陷问题只会在垂直之间产生塌陷；水平之间不受影响的；

举个例子：

下面的例子中子元素 margin-top 和margin-left都设置为100px，父元素为40px

<style>
     *{
         padding: 0;
         margin: 0;
        }
    .father {
        margin: 40px;
        background-color: rgb(242, 255, 0);
        height: 500px;
        width: 500px;
    }  
    .son {
        margin-top: 100px;
        margin-left: 100px;
        background-color: rgb(108, 108, 108);
        height: 300px;
        width: 300px;
        }
 </style>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

运行结果：

在这里插入图片描述
由运行结果可以看出父元素距离可视窗口的顶部距离与子元素一样都为100px

而父元素和子元素与左边的距离分别为40px和100px

注意：只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内元素、浮动元素或绝对定位之间的外边距不会合并。

二、解决外边距塌陷

1、给父元素设置外边框（border）或者内边距（padding）

例如：添加外边框border: 1px solid red; 或对内边距（padding）设置一个值

2、对父元素添加 overflow: hidden;

3、给父元素或者子元素增加浮动，让其脱离标准流都可以

例如：添加 float: left;

4、用display:inline-block将父元素转变为行内块元素，

5、给父元素或者子元素定位都可以，不过只能用绝对定位和固定定位

原理同样是使其脱离标准流，

绝对定位：position: absolute;

固定定位：position: fixed

6、给父盒子增加flex或者inline-flex

display: flex;

display: inline-flex;

使用上述解决方法后的效果图：

在这里插入图片描述
另外，在解决外边距坍塌会有一个BFC这个概念

BFC:Block Formatting Context，直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容外的元素。
简单理解为：将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。

下面的css属性可以触发BFC(并没有全部列出)

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex