margin合并

阅读次数: 次 2020-08-27

字数：1.3k字 | 预计阅读时长：5分钟

CSS 插圖

1 从一个标题开始说起

某一天，我想定义一个div元素，于是有了下面的代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 0 auto;
            height: 100px;
            width: 400px;
            background-color: #c56cf0;
        }
    </style>
</head>

<body>
    <div class="container">
    </div>
</body>

</html>

当我打开浏览器，看到了如下的页面效果：

后来，我想着，只有一个div有些光秃秃的，于是我就想向里面添加一些内容。于是，我向当中添加了一个h2标题

<div class="container">
    <h2>
        CSS世界
    </h2>
</div>

并指定了一些基本的样式：

h2 {
    color: #fff;
    font-size: 50px;
    line-height: 100px;
    text-align: center;
}

我满心欢喜地去查看页面的效果，结果却发现：

不得了！不得了！我的div竟然掉了下来！

当我把h2标题删除，换成了一个<span>元素。页面效果如下：

可以看到，添加的span元素并没有使得父元素div掉下来。那为什么我添加了一个h2标题，div就掉了下来呢？

这就是从margin合并开始说起了。

2 什么是`margin`合并

margin合并就是块级元素（float、absolute、inline-block除外）的上外边距和下外边距会合并为单个外边距，这样的现象称为margin合并。

margin合并只会发生在垂直方向上(不考虑writing-mode)。

margin合并有三种情况，将下来将逐一进行介绍。

3 相邻兄弟元素的`margin`合并

第一种情况是相邻兄弟元素之间的合并，这是非常常见的，例如：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相邻兄弟元素之间margin合并</title>
    <style>
        .box {
            /* 外边距10px,但垂直方向上的外边距合并了 */
            margin: 10px;
            width: 100px;
            /* 行高百分比相对于字体大小 */
            line-height: 100px;
            /* 字体大小百分比相对于父元素 */
            font-size: 30px;
            text-align: center;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>

</html>

在上述代码中，为两个div元素设置了10px的外边距，查看页面效果：

可以看到，第1个元素和第二个元素垂直方向上的外边距和水平方向上的外边距一样，只有10px的距离。这是因为第1个元素的下外边距和第2个元素的上外边距发生了合并，根据一定的规则，合并成了一个外边距。

4 父元素和首尾子元素的`margin`合并

第二种情况就是父元素和首尾子元素之间的margin合并。还记得一开始的问题吗？当给父元素div中添加了一个h2时，父元素div竟然掉了下来。这是因为父元素div和h2发生了margin合并。

父元素中的第一个子元素或最后一个子元素的margin值会和父元素发生合并，会将合并的margin作用到父元素上。

4.1 父元素和第一个子元素的合并

注意一下开篇例子的DOM结构：

<div class="container">
    <h2>
        CSS世界
    </h2>
</div>

由于h2是父元素div的第一个子元素，因此h2的margin值和父元素合并了，等同于作用到了父元素div上面，因此才造成了父元素的下移。

如下图所示：

我没有设置h2的margin，哪里来的margin呢？这是浏览器的默认样式。

4.2 父元素和最后一个子元素的合并

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        h2 {
            color: #fff;
            font-size: 50px;
            line-height: 100px;
            text-align: center;
        }

        span {
            color: #fff;
            font-size: 50px;
            line-height: 100px;
        }

        p {
            color: #fff;
            font-size: 25px;
        }

        .container {
            /* 垂直方向上的外边距为0px */
            margin: 0px auto;
            width: 400px;
            background-color: #c56cf0;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>CSS世界</h2>
        <p>我是一个段落</p>
    </div>
    <div class="container">
        <span>我是span元素</span>
    </div>
</body>

</html>