CSS 学习之正确看待 CSS 世界里的 margin 合并

一、什么是 margin 合并

块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距，这样的现象称为“margin 合并”。从此定义上，我们可以捕获两点重要的信息。

块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。
只发生在垂直方向，需要注意的是，这种说法在不考虑 writing-mode 的情况下才是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流是水平流，因此发生 margin 合并的就是垂直方向。

二、margin 合并的 3 种场景

margin 合并有以下 3 种场景。
(1) 相邻兄弟元素 margin 合并。这是 margin 合并中最常见、最基本的，例如:

p { margin: 1em 0; }
<p>第一行</p>
<p>第二行</p>

则第一行和第二行之间的间距还是 1em，因为第一行的 margin-bottom 和第二行的 margin-top 合并在一起了，并非上下相加。

(2) 父级和第一个/最后一个子元素。我们直接看例子，在默认状态下，下面 3 种设置是等效的:

<div class="father">
  <div class="son" style="margin-top: 80px"></div>
</div>

<div class="father" style="margin-top: 80px">
  <div class="son"></div>
</div>

<div class="father" style="margin-top: 80px">
  <div class="son" style="margin-top: 80px"></div>
</div>

在实际开发的时候，给我们带来麻烦的多半就是这里的父子 margin 合并。比方说，现在流行官网使用一张帅帅的大图，然后配上大大的网站标

题。由于这个标题一般在头图中间的某位置，因此，我们很自然会想到使用 margin-top 定位，然后问题就来了。因为发生了“奇怪”的事情，头图居然掉下来了!针对此现象，我特意制作了一个实例。

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

.container {
    max-width: 1920px;
    height: 384px;
    background: url(cover.jpg) no-repeat center;
}
.container > h2 {
    font-size: 128px;
    margin-top: 100px;
    color: #fff;
}

请添加图片描述

问题产生的原因就是这里的父子 margin 合并。这里大家需要理清楚“合并”这个概念。如果我们按照中文释义理解，应该必须有多个对象才能进行合并，否则根本就没有“合”这一说，确实如此。但是，这样理解也有可能会带来这样一个误区，即你要出点儿力，我要出点儿力，才叫“合”，其实不然。放到我们这里，这个父子 margin 合并的案例上就是：父元素没有出一点力，子元素出了全部的力，然后最终的 margin 全部合到了父元素上。也就是虽然是在子元素上设置的 margin-top，但实际上就等同于在父元素上设置了 margin-top，我想这样大家就能理解为何头图会掉下来了吧。但是有一点需要注意，“等同于”并不是“就是”的意思，我们使用 getComputedStyle 方法获取父元素的 margin-top 值还是 CSS 属性中设置值，并非 margin 合并的表现值。

那该如何阻止这里 margin 合并的发生呢?

对于 margin-top 合并，可以进行如下操作(满足一个条件即可):

父元素设置为块状格式化上下文元素;
父元素设置 border-top 值;
父元素设置 padding-top 值;
父元素和第一个子元素之间添加内联元素进行分隔。

对于 margin-bottom 合并，可以进行如下操作(满足一个条件即可):

父元素设置为块状格式化上下文元素;
父元素设置 border-bottom 值;
父元素设置 padding-bottom 值;
父元素和最后一个子元素之间添加内联元素进行分隔;
父元素设置 height、min-height 或 max-height。

所以，上面因为 margin 合并导致头图掉下来的问题可以添加下面的 CSS 代码进行

修复:

  .container {
    overflow: hidden;
  }

其原理就是通过设置 overflow 属性让父级元素块状格式化上下文，这在 6.4 节会有深入的探讨。

说到此处，忍不住再多说几句。jQuery 中有个 $() . s l i d e U p () /$ ().slideDown()方法，如果在使用这个动画效果的时候，发现这内容在动画开始或结束的时候会跳一下，那八九不离十就是布局存在margin合并。跳动之所以产生，就是因为jQuery的slideUp和slideDown 方法在执行的时候会被对象元素添加 overflow:hidden 设置，而 overflow: hidden 会阻止 margin 合并，于是一瞬间间距变大，产生了跳动。

(3) 空块级元素的 margin 合并。例如，下面 CSS 和 HTML 代码:

.father { overflow: hidden; }
.son { margin: 1em 0; }
<div class="father">
   <div class="son"></div>
</div>

结果，此时.father 所在的这个父级<div>元素高度仅仅是 1em，因为.son 这个空<div>元素的 margin-top 和 margin-bottom 合并在一起了。这也是上一节 margin:50%最终宽高比是 2:1 的原因，因为垂直方向的上下 margin 值合二为一了，所以垂直方向的外部尺寸只有水平方向的一半。

这种空块级元素的 margin 合并特性即使自身没有设置 margin 也是会发生的，所谓“合” 并不一定要自己出力，只要出人就可以。比方说，我们一开始的“相邻兄弟元素 margin 合并”，其实，就算兄弟不相邻，也是可以发生合并的，前提是中间插手的也是个会合并的家伙。比方说:

p { margin: 1em 0; }
<p>第一行</p>
<div></div> 
<p>第二行</p>

此时第一行和第二行之间的距离还是 1em，中间看上去隔了一个

元素，但对最终效果却没有任何影响。如果非要细究，则实际上这里发生了 3 次 margin 合并， <div>和第一行 <p> 的 margin-bottom 合并，然后和第二行 <p>的 margin-top 合并，这两次合并是相邻兄弟合并。由于自身是空 <div>，于是前两次合并的 margin-bottom 和 margin-top 再次合并，这次合并是空块级元素合并，于是最终间距还是 1em。

根据我多年开发的经验，由于空块级元素的 margin 合并发生不愉快事情的情况非常之少。一来，我们很少会在页面上放置没什么用的空<div>;二来，即使使用空<div>也是画画分隔线之类的，一般都是使用 border 属性，正好可以阻断 margin 合并;三来，CSS 开发人员普遍没有 margin 上下同时开工的习惯，比方说一个列表，间距都是一样的，开发人员一般都是单独设定 margin-top 或 margin-bottom 值，因为这会让他们内心觉得更安全。于是，最终，空块级元素的 margin 合并就变成了一个对 CSS 世界有着具有巨大意义但大多数人都不知道的特性。

如果有人不希望空<div>元素有 margin 合并，可以进行如下操作:

设置垂直方向的 border;
设置垂直方向的 padding;
里面添加内联元素(直接 Space 键空格是没用的);
设置 height 或者 min-height。

三、margin 合并的计算规则

我把 margin 合并的计算规则总结为“正正取大值”“正负值相加”“负负最负值”3 句话。

下面来分别举例说明。

(1) 正正取大值。如果是相邻兄弟合并:

.a { margin-bottom: 50px; }
.b { margin-top: 20px; }
<div class="a"></a>
<div class="b"></a>

此时.a 和.b 两个<div>之间的间距是 50px，取大的那个值。如果是父子合并:

.father { margin-top: 20px; }
.son { margin-top: 50px; }
<div class="father">
  <div class="son"></div>
</div>

此时.father 元素等同于设置了 margin-top:50px，取大的那个值。如果是自身合并:

.a {
  margin-top: 20px;
  margin-bottom: 50px;
}
<div class="a"></div>

则此时.a 元素的外部尺寸是 50px，取大的那个值。

(2)正负值相加。如果是相邻兄弟合并:

.a { margin-bottom: 50px; }
.b { margin-top: -20px; }
<div class="a"></a>
<div class="b"></a>

此时.a 和.b 两个<div>之间的间距是 30px，是-20px+50px 的计算值。如果是父子合并:

.father { margin-top: -20px; }
.son { margin-top: 50px; }
<div class="father">
  <div class="son"></div>
</div>

此时.father 元素等同于设置了 margin-top:30px，是-20px+50px 的计算值。如果是自身合并:

.a {
  margin-top: -20px;
  margin-bottom: 50px;
}
<div class="a"></div>

则此时.a 元素的外部尺寸是 30px，是-20px+50px 的计算值。

(3) 负负最负值。如果是相邻兄弟合并:

.a { margin-bottom: -50px; }
.b { margin-top: -20px; }
<div class="a"></a>
<div class="b"></a>

此时.a 和.b 两个<div>之间的间距是-50px，取绝对负值最大的值。如果是父子合并:

.father { margin-top: -20px; }
.son { margin-top: -50px; }
<div class="father">
 <div class="son"></div>
</div>

此时.father 元素等同于设置了 margin-top:-50px，取绝对负值最大的值。

如果是自身合并:

.a {
 margin-top: -20px;
 margin-bottom: -50px;
}
<div class="a"></div>

则此时.a 元素的外部尺寸是-50px，取绝对负值最大的值。

四、margin 合并的意义

我之前曾见到类似这样的说法:“margin-top 合并 bug。”这种说法是大有问题的，

“margin-top 合并”这种特性是故意这么设计的，在实际内容呈现的时候是有着重要意义的，根本就不是 bug！不要遇到出乎自己意料或者自己无法理解的现象就称其为 bug。

CSS世界的CSS属性是为了更好地进行图文信息展示而设计的，博客文章或者新闻信息是图文信息的典型代表，基本上离不开下面这些 HTML:

<h2>文章标题</h2>
<p>文章段落 1...</p>
<p>文章段落 2...</p>
<ul>
  <li>列表 1</li>
  <li>列表 2</li>
  <li>列表 3</li>
</ul>

而这里的<h2>、<p>、<ul>默认全部都是有垂直方向的 margin 值的，而且单位全部都是 em。首先解释一下为何需要 margin 值。其实原因很简单，CSS 世界的设计本意就是图文信息展示，有了默认的 margin 值，我们的文章、新闻就不会挤在一起，垂直方向就会层次分明、段落有致，阅读体验就会好!为何使用 em 作为单位也很好理解，大家应该知道浏览器默认的字号大小是可以自定义的吧，例如，默认的是 16 像素，假如我们设置成更大号的字号，同时 HTML 标签的 margin 是像素大小，则会发生文字变大但是间距不变的情况，原本段落有致的阅读体验必然又会变得令人窒息。em 作为相对单位，则可以让我们的文章或新闻无论多大的字体都排版良好。可以看到，HTML 标签默认内置的 CSS 属性值完全就是为了更好地进行图文信息展示而设计的。

我们平时进行网站开发的时候都会重置各种默认的 margin 尺寸，这是件需要好好审视的事情，对于绝大多数网站，确实需要做这样的处理，因为这些网站鲜有传统的图文信息展示区域。但是，如果你的站点是博客、新闻门户或公众号文章，我们应该做的是统一标签的 margin 大小，而不是一股脑地重置成 0。

下面说说 margin 合并的意义。对于兄弟元素的 margin 合并其作用和 em 类似，都是让图文信息的排版更加舒服自然。假如说没有 margin 合并这种说法，那么连续段落或列表之类首尾项间距会和其他兄弟标签成 1:2 关系;文章标题距离顶部会很近，而和下面的文章详情内容距离又会很开，就会造成内容上下间距不一致的情况。这些都是糟糕的排版体验。而合并机制可以保证元素上下间距一致，无论是<h2>标题这种 margin 偏大的元素，还是中规中矩的<p> 元素，因为“正正取大值”。

父子 margin 合并的意义在于:在页面中任何地方嵌套或直接放入任何裸<div>，都不会影响原来的块状布局。<div>是网页布局中非常常用的一个元素，其语义是没有语义，也就是不代表任何特定类型的内容，是一个通用型的具有流体特性的容器，可以用来分组或分隔。由于其作用就是分组的，因此，从行为表现上来看，一个纯粹的<div>元素是不能够也不可以影响原先的布局的。现在有如下一段 HTML:

    <div style="margin-top:20px;"></div>

请问:现在要在上面这段 HTML 的外面再嵌套一层<div>元素，假如说现在没有父子 margin 合并，那这层新嵌套的<div>岂不阻断了原本的兄弟 margin 合并?很有可能间距就会变大，妥妥地影响了原来的布局，这显然就违背了<div>的设计作用了。所以才有了父子 margin 合并，外面再嵌套一层<div>元素就跟没嵌套一样，表现为 margin-top:20px 就好像是设置在最外面的<div>元素上一样。

自身 margin 合并的意义在于可以避免不小心遗落或者生成的空标签影响排版和布局。例如:

<p>第一行</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>第二行</p>

其和下面这段 HTML 最终视觉效果是一模一样的:

<p>第一行</p>
<p>第二行</p>

若是没有自身 margin 合并特性的话，怕是上面的 HTML 第一行和第二行之间要隔了很多行吧。

知道了 margin 合并的意义以及作用，而且合并规则的兼容性良好，所以，我自己平时网页制作的时候，遇到列表或者模块，全部都是保留上下 margin 设置。例如:

.list {
  margin-top: 15px;
  margin-bottom: 15px;
}

而不是战战兢兢地使用:

.list {
  margin-top: 15px;
}

因为 margin 合并特性，所以我们无须担心列表之间的间距会很大。不会的，就是 15px! 相反，这种设置让我们的页面结构容错性更强了，比方说最后一个元素移除或位置调换，均不会破坏原来的布局，也就是我们的 CSS 无须做任何调整。

参考资料：《CSS 世界》