CSS外边距和并(塌陷)及多种解决方法

wshwsh_

已于 2023-07-24 11:29:08 修改

阅读量987

点赞数

文章标签： css 前端学习方法面试 css3

于 2023-07-22 17:13:11 首次发布

本文链接：https://blog.csdn.net/wshwsh_/article/details/131870148

版权

外边距和并(塌陷)及多种解决方法

一、兄弟元素外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

在这里插入图片描述

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

在这里插入图片描述

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

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兄弟外边距合并</title>
    <style>
        .box1,.box2 {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: aqua;
            /* 第一个元素的下外边距为30px */
            margin-bottom: 30px;
        }

        .box2 {
            background-color: hotpink;
            /* 第二个元素的上外边距为50px */
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>

</body>

</html>

在示例代码中第一个元素的下外边距为30px，第二个元素的上外边距为50px，正常情况下两个元素的距离应该为80px，但是因为外边距合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，所有两个元素的距离是50px。

在这里插入图片描述

解决方法：

1、只给其中一个元素增加外边距(推荐)

在实际开发中我们只需要给其中一个盒子增加项目需要的外边距即可，简单方便，这也是大部分开发者使用的方式。

        .box1 {
            background-color: aqua;
            /* 第一个元素的下外边距为80px */
            margin-bottom: 80px;
        }

        .box2 {
            background-color: hotpink;
        }

2、使用浮动

给下面的元素增加浮动，使其脱离文档流就可以了

注意：不要给第一个元素增加浮动，否则第一个元素脱离文档流，第二个元素会自动填补，二者可能会重叠

        .box1 {
            background-color: aqua;
            /* 第一个元素的下外边距为30px */
            margin-bottom: 30px;
        }

        .box2 {
            background-color: hotpink;
            /* 第二个盒子的上外边距为50px */
            margin-top: 50px;
            /* 使其浮动，脱离文档流 */
            float:left;
        }

3、使用定位

给下面的元素使用定位，使其脱离文档流就可以了，原理和浮动一样。

注意：position的值只能是absolute绝对定位和fixed固定定位

        .box1 {
            background-color: aqua;
            /* 第一个元素的下外边距为30px */
            margin-bottom: 30px;
        }

        .box2 {
            background-color: hotpink;
            /* 第二个元素的上外边距为50px */
            margin-top: 50px;
            /* 使用绝对定位，使其脱离文档流 */
            position: absolute;
        }

4、将其中一个元素变为行内块元素

使用 display: inline-block;属性将其中一个元素变为行内块元素就可以了

display的很多属性值都可以解决外边距合并问题，常用的就是 inline-block flex或 inline-flex

        .box1 {
            background-color: aqua;
            /* 第一个元素的下外边距为30px */
            margin-bottom: 30px;
            /* 将元素变为行内块元素 */
            display: inline-block;
        }

        .box2 {
            background-color: hotpink;
            /* 第二个元素的上外边距为50px */
            margin-top: 50px;

        }

5、给其中一个元素增加一个父元素，给父元素添加overflow：hidden样式

这样会使兄弟元素不在同一个BFC区域下，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。

 		 .father {
            overflow: hidden;
      	  }
        .box1 {
            background-color: aqua;
            /* 第一个元素的下外边距为30px */
            margin-bottom: 30px;
        }
        .box2 {
            background-color: hotpink;
            /* 第二个元素的上外边距为50px */
            margin-top: 50px;

        }

    <div class="father">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>

6、给其中一个元素增加一个父元素，给父元素添加一个边框

        .father {
            /* 给父元素添加边框 */
            border: 1px solid white;
        }
        .box1 {
            background-color: aqua;
            /* 第一个元素的下外边距为30px */
            margin-bottom: 30px;
        }
        .box2 {
            background-color: hotpink;
            /* 第二个元素的上外边距为50px */
            margin-top: 50px;

        }

7、给其中一个元素增加一个父元素，给父元素增加内边距

        .father {
            /* 给父元素增加内边距 */
            padding: 1px;
        }

        .box1 {
            background-color: aqua;
            /* 第一个元素的下外边距为30px */
            margin-bottom: 30px;
        }

        .box2 {
            background-color: hotpink;
            /* 第二个元素的上外边距为50px */
            margin-top: 50px;

        }

解决外边距合并后的效果：

在这里插入图片描述

二、父子元素外边距合并(塌陷)

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子外边距合并</title>
    <style>
        * {
            /* 清除浏览器自带的内外边距 */
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 父元素的上外边距为30px */
            margin-top: 30px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            /* 子元素的上外边距为50px */
            margin-top: 50px;
        }
    </style>
</head>

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

</html>

示例代码中，父元素的上外边距为30px，子元素的上外边距为50px，正常情况下应该是父元素距离上面30px，子元素距离父元素50px，但是因为外边距合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，所以呈现的结果是父元素和子元素整体距离上边50px 子元素紧挨着父元素。

在这里插入图片描述

解决方法：

父子元素与兄弟元素的外边距合并的解决方法大致相同，所以就不在详细写代码了。

第一种：给父元素或子元素增加浮动，让其脱离标准流就可以了

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

第三种：将父元素变为行内块元素，display: inline-block;

第四种：给父元素增加overflow：hidden；样式(推荐)

第五种：给父元素增加边框border值

第六种：给父元素增加内边距padding值

解决外边距合并后的效果：
在这里插入图片描述

wshwsh_

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
CSS外边距和并(塌陷)及多种解决方法

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。
复制链接

扫一扫