块级元素垂直外边距合并问题详解

rap小浣熊

已于 2022-02-17 11:06:20 修改

阅读量1.4k

点赞数 1

分类专栏： CSS 文章标签：前端 css html

于 2022-02-16 18:06:45 首次发布

本文链接：https://blog.csdn.net/weixin_44162375/article/details/122965292

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

块元素的垂直外边距合并问题

一、垂直外边距

1、使用margin属性定义块级元素的垂直外边距时，会出现外边距合并问题。

垂直外边距，指的就是margin-up上外边距和margin-bottom下外边距。

2、每个盒子都有上下左右四个不同方向的margin值，垂直外边距指的就是上下外边距。

二、相邻块级元素的垂直外边距合并

1、设计两个上下相邻的div盒子模型，得到2个相邻的块级元素。代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;


        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;


        }
    </style>
</head>

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

</html>

2、生成如下两个相邻的块级元素：

在这里插入图片描述

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是，
取margin值最大的一组外间距作为两个块级元素之间的垂直外间距。
结合上图，代码中生成的相邻块元素的垂直外间距应该是取二者垂直外间距中最大的一个值，应该是20px.

3.详细讲解如下图：参考链接link.
在这里插入图片描述

4、解决方案
尽量只给一个盒子设置margin值

三、嵌套块级元素的垂直外间距合并（塌陷）

1、对于嵌套关系的两个块级元素，父元素如果没有 上内边距和边框，那么

父元素的上外边距就会和子元素的上外边距合并，就产生“子元素贴在父元素上面”的现象；
二者中哪个外边距margin-top值最大，就选合哪个作为合并后的外边距值；
父元素会塌陷外边距较大的值，也就是嵌套块元素塌陷。

2、生成一组嵌套关系的块级元素：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;
    </style>
</head>

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

</html>

生成结果如下：在这里插入图片描述

（1）现在因为父元素太靠近页面边缘，那就通过设置父元素的margin-top值来调整一下，代码如下：

  <style>
        body {
            margin: 0;
        }

        .father {
            width: 200px;
            height: 150px;
            background-color: pink;
            margin-top: 20px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;
    </style>

可以看到整体都向下移动了一些：
在这里插入图片描述

（2）若要让子元素与父元素分开一些，不要紧贴着父元素，那么再设置一下子元素的外边距可以吗？

 <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 50px;
        }
    </style>

结果发现，父元素和子元素整体向下移动了很多，但是父元素子元素之间还是没有变化。这是因为，父元素连带着子元素，向margin-top值较大的一端塌陷。在这里插入图片描述

3、参考文档：link. 在这里插入图片描述
参考上图，父元素会顺带着子元素，塌陷向外边距margin-top较大的一端,二者之间还是会合并在一起。

4、解决方案

可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow: hidden。

前2种定义边框或者内边距的方法，都会改变块级元素的大小，不建议使用。
综上，最常用的是添加overflow: hidden方法改善嵌套关系块级元素的垂直外边距合并问题。

rap小浣熊

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
块级元素垂直外边距合并问题详解

块元素的垂直外边距合并问题一、垂直外边距1、使用margin属性定义块级元素的垂直外边距时，会出现外边距合并问题。垂直外边距，指的就是margin-up上外边距和margin-bottom下外边距。2、每个盒子都有上下左右四个不同方向的margin值，垂直外边距指的就是上下外边距。二、相邻块级元素的垂直外边距合并1、设计两个上下相邻的div盒子模型，得到2个相邻的块级元素。代码如下：//<!DOCTYPE html><html lang="en"><he
复制链接

扫一扫

专栏目录