当前位置：首页 > article >正文

【CSS in Depth 2 精译_021】3.4 负的外边距 + 3.5 外边距折叠

article 2024/9/22 13:21:59

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第一章层叠、优先级与继承（已完结）
1.1 层叠
1.2 继承
1.3 特殊值
1.4 简写属性
1.5 CSS 渐进式增强技术
1.6 本章小结

第二章相对单位（已完结）
2.1 相对单位的威力
2.2 em 与 rem
2.3 告别像素思维
2.4 视口的相对单位
2.5 无单位的数值与行高
2.6 自定义属性
2.7 本章小结

第三章文档流与盒模型
3.1 常规文档流（已完结）
3.1.1 内容水平居中
3.1.2 逻辑属性
3.1.3 用好逻辑属性的简写形式

3.2 盒模型（已完结）
3.2.1 避免使用魔数
3.2.2 调整盒模型
3.3.3 全局设置 border-box

3.3 元素的高度
3.3.1 控制溢出行为
3.3.2 百分比高度的备选方案
3.3.3 使用 min-height 和 max-height

3.4 负的外边距 ✔️
3.5 外边距折叠 ✔️
3.5.1 文字折叠 ✔️
3.5.2 多个外边距折叠 ✔️
3.5.3 向容器外折叠 ✔️

3.6 容器内的元素间距问题（精译中 ⏳）
3.6.1 当内容改变时的处理（精译中 ⏳）
3.6.2 更通用的解决方案（精译中 ⏳）

文章目录

- 3.4 负的外边距
- 3.5 外边距折叠
- - 3.5.1 文字折叠
  - 3.5.2 多个外边距折叠
  - 3.5.3 容器外部折叠

3.4 负的外边距

与内边距和边框宽度不同，外边距可以设为负值。负的外边距有一些特殊用途，例如让元素重叠，或者拉伸到比容器还宽。

负外边距的具体行为取决于设置在元素的哪边，如图 3.13 所示。如果作用于左侧或顶部，则负外边距会分别将元素向左、向上移动，导致元素在文档流中与前面的元素重叠。但如果应用于底部，负外边距则不会移动该元素，而是将其下方的元素拉上来；这和直接给正下方的元素一个负的顶部外边距的效果类似。

图 3.13 负外边距的行为特征

图 3.13 负外边距的行为特征

尽管负外边距可用于制造多个元素间的重叠效果，但任何复杂的样式追踪起来都会比较麻烦。通常情况下，更推荐使用定位属性 position 来实现该效果；有关定位的知识将在第 6 章中详细介绍。

警告

通过负的外边距实现的元素重叠效果，可能会让包含交互逻辑的元素挪到其他元素后面，从而导致无法正常点击。

根据元素是行内元素还是块级元素，负的右外边距的行为特征也不尽相同。对于行内元素，其行为模式类似于负的下外边距，会将后续内容往左侧拉动，进而与该元素重叠；但在实践中我从未使用过这种方法。

而对于块级元素，负的右外边距则会向右侧拉动元素边缘，使元素扩宽。这可能导致元素边缘超出容器。

此时若将负的左外边距联系起来，元素的左右两边则会延伸到容器外部，致使宽度超过容器宽度。这就是双容器模式（double container pattern，详见 3.1.1 小节内容）的另一种应用，如图 3.14 所示。

图 3.14 负的左右外边距将块级元素扩展到其容器外部示意图

图 3.14 负的左右外边距将块级元素扩展到其容器外部示意图

上述效果的样式代码如代码清单 3.9 所示。该方法可用实现图片的“流布溢出（bleed）”效果，令其宽度大于所在文本列。

代码清单 3.9 负的外边距让图片溢出容器

.container {
  max-width: 1080px;
  margin-inline: auto;
}
.expanded-child {
  margin-inline: -2em; /* 致使元素在两个方向扩宽到容器外部 */
}

注意，该方案也可能导致内容超出浏览器视口。因此在实际应用时要注意样式在小屏幕上仍能正常生效。

3.5 外边距折叠

在回到本章的示例页，有没有发现有些外边距不对劲？标题或容器并没有设置过外边距，但却出现了间距（如图 3.15 所示）。这个间距是哪儿来的呢？

图 3.15 外边距折叠导致的间距

图 3.15 外边距折叠导致的间距

当顶部和（或）底部的外边距相邻时，就会重叠为一个单独的外边距。这种现象称为 折叠（collapsing）。图 3.15 中标题栏下方的空白就是外边距折叠导致的。一起来看看它的工作原理。

3.5.1 文字折叠

外边距折叠主要与包含文本的块级元素间的间距有关。默认情况下，段落元素（<p>）的上下外边距均为 1em，由用户代理样式表指定。但当两个段落紧挨着排列时，其实际外边距并不会相加得到 2em，而是会相互折叠，只产生 1em 的间距。

可以在示例页的 <main> 元素中看到该折叠效果。元素 <h2> 内的标题（即“Come join us!”）其底部外边距为 0.83em，与下方段落的顶部外边距折叠。二者的外边距分布情况如图 3.16 所示。注意观察它们各自的外边距是怎样在页面上占据相同位置的：

图 3.16 标题（左侧）与段落（右侧)勾勒出的外边距示意图

图 3.16 标题（左侧）与段落（右侧)勾勒出的外边距示意图

外边距折叠后的实际大小，等于参与折叠的外边距中较大的一方。本例中，标题栏的底部外边距为 19.92px（字号 24px × 0.83em 外边距），而段落的顶部外边距为 16px（字号 16px × 1em 外边距）；二者较大的一方 19.92px 即为实际的外边距大小。

3.5.2 多个外边距折叠

就算两个元素不是相邻的同级元素，外边距也会折叠。例如将段落元素 p 包裹在一个 div 中，如代码清单 3.10 所示，折叠效果也是一样的。在没有任何其他 CSS 干预的情况下，所有相邻的上下外边距都会发生折叠。

代码清单 3.10 用 div 包裹的段落其外边距同样会发生折叠

<main class="main">
  <h2>Come join us!</h2>
  <div><!-- 即便用另一个 div 包裹起来，段落的外边距仍会折叠 -->
    <p>
      The Franklin Running club meets at 6:00pm
      every Thursday at the town square. Runs
      are three to five miles, at your own pace.
    </p>
  </div>
</main>

本例中，三个不同元素的外边距折叠在了一起：<h2> 的底部外边距、以及 <div> 和 <p> 各自的顶部外边距。这些样式属性的计算值分别为 19.92px、0px 和 16px。因此元素之间最终的间距（space）仍然是 19.92px，即三者中的最大值。就算将段落元素嵌套进多个 div 容器中，最终渲染的效果还是不变——所有的外边距都折叠到一块儿了。

总之，任何相邻元素的上下外边距都会折叠到一起。如果在页面中添加一个空的、无样式的 div 元素（即没有指定高度、边框或内边距），其自身的上下外边距也会折叠。

注意

外边距折叠只针对上下外边距；左右外边距不会折叠。（纵向书写模式下情况则刚好相反，此时会折叠的反倒是左右外边距）。

折叠的外边距就像是“个人安全距离”（个人安全距离）。如果站在公交车站的两个人都觉得保持 3 英尺（译注：1 英尺约合 0.3048 米）的距离很舒服，那他们会很乐意间隔 3 英尺，不必非要间隔 6 英尺才会感到舒适。

这就意味着在设置元素外边距时，不用太在意其上方或下方内容的干扰。如果设置标题的底部外边距为 1.5em，则无论下方元素是 margin-top 为 1em 的 <p>，还是不带外边距的 <div>，其间距均为 1.5em（译注：这里假设 1.5em 的计算值更大）。只有当下方的元素需要更多间距时，折叠后的外边距才会增大。

3.5.3 容器外部折叠

三个连续的外边距折叠可能会让您措手不及。如果容器带了背景样式，元素的外边距在容器外部折叠通常会产生不理想的效果。

这就是导致标题下方出现空隙的原因。页面标题是一个 <h1> 元素，用户代理样式设置了 0.67em（即 21.44px）的底部外边距。标题位于无边距的 <header> 中。这两个元素的底部外边距相邻，因此它们会折叠，从而导致标题的底部外边距为 21.44px。同样的情况也出现在两个元素的顶部外边距上。

这样就有点奇怪了。本希望 <header> 的蓝色背景在纵向上更宽一些，这样标题周围就留出了足够的空间；但外边距未必会在预想的位置发生折叠。还好有很多种方法来避免这种情况发生，并且在之前的页面正文区域其实以及处理过该类问题了；注意观察，“Come join us!”字样上方的外边距并没有折叠到容器外面。这是因为容器设置了内边距 padding，如果外边距之间有任何内边距样式，它们就不会折叠。

如果为 header 容器添加上下内边距，其内部元素的外边距就不会折叠到容器外；也就是说，<h1> 的外边距和 <header> 的内边距都会为标题文本提供空间，略显冗余。此时最佳的解决方案可能需要完全去掉 h1 元素的外边距，让容器 header 的内边距来指定所需空间。

图 3.17 为标题栏设置内边距，防止外边距折叠

图 3.17 为标题栏设置内边距，防止外边距折叠

按照代码清单 3.11 更新样式，会发现标题区和正文区之间不再有间隙。这个问题稍后再来解决。

代码清单 3.11 给标题栏加上内边距样式

当容器上方或下方出现意外的空白，或者文本被压到容器的顶部或底部时，罪魁祸首很可能就是外边距折叠。

对容器应用 overflow: auto（或者非 visible 的值），可以防止内部元素的外边距与容器外边距发生折叠。通常这种方案副作用最小。
在两个外边距间添加边框或内边距，防止外边距折叠。
对于容器为内联块（inline-block）级元素（其元素是浮动的，详见第 12 章）、或者设置了绝对或固定定位的元素（详见第 6 章），外边距不会在容器外部折叠。
使用 Flexbox 弹性盒布局或 Grid 网格布局时，布局内的元素间不会发生外边距折叠（详见第 4 章和第 5 章）。
display 属性为 table-cell 的元素没有外边距，因此不会折叠。这也适用于值为 table-row 的元素以及大部分表格型的样式值，但 table、table-inline 和 table-caption 除外。