CSS 盒模型模块 第4级

1. 简介

本小节不具规范性。

CSS 描述了源文档中的每个元素和每个文本字符串如何通过将 元素树 转换为一组 盒子，这些盒子的大小、位置和在 画布 上的堆叠层级取决于它们的 CSS 属性值。

注意： CSS 级联与继承 描述了如何将属性分配给盒子树中的元素， 而 CSS Display 3 § 1 简介 描述了如何将 元素树 转换为 盒子树。

每个 CSS 盒子 都有一个矩形内容区域，内容周围有一层内边距，内边距周围有一个边框，边框外部有一个外边距。尺寸属性 与其他控制布局的属性一起定义了内容区域的大小。盒子样式属性—内边距 及其长属性，边框 及其长属性， 和 外边距 及其长属性—定义了这些其他区域的大小。外边距和内边距在本模块中定义，边框在 [css-backgrounds-3] 中定义。

注意： 本模块 最初包含 了与盒子生成（现在在 [css-display-3] 中定义）相关的 CSS 第3级规范文稿，盒模型（在这里定义），以及块布局（现在只在 [CSS2] 第9章和第10章中定义）。由于在 CSS2.1 的开发过程中暂停了其维护，该文稿在 CSS2 第1次修订最终完成时已严重过时。因此，块布局部分的文稿已被退役，计划将其与 CSS2 同步并更新，作为未来块布局模块的输入。它将与本模块和 CSS Display 模块 分离，既因为工作量巨大，也因为认识到 CSS 现在有多种布局模型（弹性布局、网格布局、定位布局 和 表格布局，此外还有块布局），每个模型都值得拥有各自的平行模块。

1.1. 值的定义

本规范遵循 CSS 属性定义惯例，并使用 值定义语法。[CSS-VALUES-3]。本规范中未定义的值类型在 CSS 值与单位 [CSS-VALUES-3] 中定义。与其他 CSS 模块结合时，可能会扩展这些值类型的定义。

除了在其定义中列出的特定属性值外，所有本规范中定义的属性也接受 CSS 通用关键字 作为其属性值。为了提高可读性，未显式重复这些关键字。

1.2. 模块交互

本模块替代了 [CSS2] 第8.1、8.2、8.3（但不包括8.3.1）和8.4节中定义的外边距和内边距属性的定义。

本模块中的所有属性适用于 ::first-line 和 ::first-letter 伪元素。

2. CSS 盒模型

每个盒子都有一个 内容区域 （它包含其内容—文本、子盒子、图像或其他 替换元素 内容等）， 以及可选的 内边距、边框 和 外边距区域； 每个区域的大小由相应的属性指定，可以为零（在外边距的情况下，可以为负值）。 下图展示了这些区域之间的关系以及用于指代盒子各部分的术语：

盒子的内容、内边距和边框区域的背景由其 背景 属性指定。 边框区域可以通过使用 边框 属性来绘制边框样式。 外边距始终是透明的。 参见 [css-backgrounds-3]。

外边距、边框和内边距可以分为上、右、下和左段，每个段都可以通过相应的属性独立控制。

2.1. 盒子与边缘

每个区域（内容、内边距、边框和外边距）的周边被称为 边缘，每个 边缘 可以分为上、右、下和左侧。 因此，每个 盒子 有四个 边缘，每个边缘由四个侧面组成：

内容边缘 或 内边缘

内容边缘包围着盒子的宽度和高度所定义的矩形， 它通常取决于元素的内容和/或其 包含块 的大小。 内容边缘 的四个侧面共同定义了盒子的 内容盒子。

内边距边缘

内边距边缘包围着盒子的内边距。 如果内边距在某一侧的宽度为零， 则该侧的内边距边缘与内容边缘重合。 内边距边缘 的四个侧面共同定义了盒子的 内边距盒子， 它包含了 内容 和 内边距区域。

边框边缘

边框边缘包围着盒子的边框。 如果某一侧的边框宽度为零， 则该侧的边框边缘与内边距边缘重合。 边框边缘 的四个侧面共同定义了盒子的 边框盒子， 它包含了盒子的 内容、内边距 和 边框区域。

外边距边缘 或 外边缘

外边距边缘包围着盒子的外边距。 如果某一侧的外边距宽度为零， 则该侧的外边距边缘与边框边缘重合。 外边距边缘 的四个侧面共同定义了盒子的 外边距盒子， 它包含了盒子的所有 内容、内边距、边框 和 外边距区域。

类似 border-radius 这样的属性可以改变盒子的 边缘 形状，用于绘制和裁剪（参见 CSS Backgrounds 3 § 4.3 角裁剪）； 但这些效果通常不会影响布局。 规范可以区分相关的 形状边缘 或 非形状边缘。

2.2. 分割

当一个盒子 发生分割时—​即跨行或跨页被打断为多个 盒子片段—​其所有的盒子 (内容盒子、内边距盒子、边框盒子、外边距盒子) 也会被分割。 内容/内边距/边框/外边距区域如何应对分割在 [css-break-4] 中规定，并由 box-decoration-break 属性控制。

2.3. 盒子边缘关键字

以下 <box> CSS 关键字定义用于那些需要引用不同盒子边缘的属性（例如 transform-box 和 background-clip）：

content-box

指的是 内容盒子 或 内容边缘。 （在 SVG 环境中，被视为 fill-box。）

padding-box

指的是 内边距盒子 或 内边距边缘。 （在 SVG 环境中，被视为 fill-box。）

border-box

指的是 边框盒子 或 边框边缘。 （在 SVG 环境中，被视为 stroke-box。）

margin-box

指的是 外边距盒子 或 外边距边缘。 （在 SVG 环境中，被视为 stroke-box。）

fill-box

指的是 对象边界盒子 或其边缘。 （在 CSS 盒子环境中，被视为 content-box。）

stroke-box

指的是 描边边界盒子 或其边缘。 （在 CSS 盒子环境中，被视为 border-box。）

view-box

指的是最近的 SVG 视口 的 原点盒子， 该矩形的宽度和高度与 SVG 视口 相同， 其左上角锚定在坐标系原点。 （在 CSS 盒子环境中，被视为 border-box。）

注意： 当 SVG 视口 本身并未锚定在原点时， 此 原点盒子 实际上并不对应 SVG 视口！

为了方便起见，定义了以下值类型以表示常用的 <box> 的子集：

<visual-box> = content-box | padding-box | border-box
<layout-box> = <visual-box> | margin-box
<paint-box> = <visual-box> | fill-box | stroke-box
<coord-box> = <paint-box> | view-box

3. 外边距

外边距 包围着盒子的边框边缘， 为盒子之间提供间距。 外边距属性 指定盒子的 外边距区域 的厚度。 外边距 速记属性 设置所有四个边的外边距， 而外边距的 长属性 只设置其各自的边。 本规范定义了 物理 外边距 长属性；CSS 逻辑属性 1 § 4.2 流相对外边距：外边距块起始、外边距块结束、外边距内联起始、外边距内联结束属性和外边距块与外边距内联速记属性 另外 定义了 流相对 外边距 长属性。 两组属性控制相同的外边距： 它们只是索引每个边的不同方式。

注意： 在 块布局 中相邻的外边距会 折叠。 详情参见 CSS2§8.3.1 折叠的外边距。 此外，某些情况下，邻接的外边距会在 分割断点 处被截断。 详情参见 CSS 分割 4 § 5.2 断点处的相邻外边距：外边距断点属性。

3.1. 页面相对（物理）外边距属性：外边距上、外边距右、外边距下 和 外边距左 属性

这些属性分别设置盒子的上、右、下、左外边距。

外边距属性允许使用负值， 但可能存在特定于实现的限制。

3.2. 外边距速记：外边距 属性

外边距 属性是用于同时设置 外边距上、外边距右、外边距下 和 外边距左 的速记属性。

如果只有一个值， 则应用于所有边。 如果有两个值， 第一个值用于上、下外边距， 第二个值用于左、右外边距。 如果有三个值， 第一个值用于上外边距， 第二个值用于左、右外边距， 第三个值用于下外边距。 如果有四个值， 它们分别应用于上、右、下、左外边距。

body { margin: 2em }         /* 所有外边距设为 2em */
body { margin: 1em 2em }     /* 上 & 下 = 1em，左 & 右 = 2em */
body { margin: 1em 2em 3em } /* 上=1em，右=2em，下=3em，左=2em */

body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em; /* 从对面侧（右侧）复制 */
}

3.3. 容器边缘的外边距修剪：margin-trim 属性

通常希望在兄弟元素之间设置外边距， 但不希望在容器的起始/结束处设置外边距， 这时可以通过内边距来控制间距。 该属性允许容器修剪其子元素的外边距， 使其与容器的边缘相邻。其值的含义如下：

none

容器不修剪外边距。

注意： 但是，在块布局中， 子元素的外边距可以与其父元素折叠。 参见 CSS2§8.3.1：折叠的外边距。

block-start

inline-start

inline-end

block-end

对于由此容器包含的流内盒子， 与容器指定边相邻的外边距被修剪为零。 它还会修剪与此类外边距折叠的任何后代外边距 （但不会修剪其自身、兄弟或祖先的外边距）。

block

计算为 block-start block-end。

inline

计算为 inline-start inline-end。

注意： 遵循最短序列化原则，等效于 计算值 的值将序列化为 block 或 inline 这些关键字。

相邻关系不受盒子对齐规则（[CSS-ALIGN-3]）控制的空间影响， 并忽略折叠的盒子（参见 CSS 弹性盒子布局 1 § 4.4 折叠的项目） 和轨道（CSS 网格布局 1 § 7.2.3.2 重复填充：自动填充和自动适配）。

注意： 另请参阅 margin-break 属性， 该属性适用于当外边距与 分割断点（分页符 / 分栏符 / 等）相邻时盒子的外边距。

需要定义该属性 在盒子创建 分割上下文 时如何影响断点处的外边距。 参见 问题 3314。

注意： 当在 块容器 上指定时，此属性对浮动元素的外边距没有影响； 本模块的未来版本可能会为浮动元素引入特定的控制项。

3.3.1. 修剪块容器内容

对于 块容器，margin-trim 会丢弃以下内容：

• 当在块起始边修剪时，块级第一个子元素的块起始外边距。
• 当在块结束边修剪时，块级最后一个子元素的块结束外边距。
• 与这些外边距折叠的任何外边距。

它不会影响 行内轴 外边距（对于 块级 后代而言）， 也不会影响任何外边距（对于 行内级 后代而言）。

3.3.2. 修剪弹性容器内容

对于 弹性容器 这一特定情况， margin-trim 会丢弃

• 相应外边距（属于每个 弹性项，这些项位于 最近的 弹性行 上），当修剪的边缘平行于 主轴 时
• 相应外边距（属于首个/末个 弹性项，这些项位于每条 弹性行 上），当修剪的边缘平行于 交叉轴 时

此过程忽略所有 已折叠的弹性项。

3.3.3. 修剪网格容器内容

对于 网格容器，margin-trim 会丢弃每个网格项目在与相关盒子边缘相邻的 网格轨道上的相应外边距。

此过程忽略任何 折叠的网格轨道。 但不会忽略任何其他空的 网格轨道。

4. 内边距

内边距 插入在盒子的内容边缘 和内边距边缘之间， 为内容与边框之间提供间距。 内边距属性 指定盒子的 内边距区域 的厚度。 内边距 速记属性 设置所有四个边的内边距， 而内边距的 长属性 仅设置其各自的边。 本规范定义了 物理 内边距 长属性；CSS 逻辑属性 1 § 4.4 流相对内边距：内边距块起始、内边距块结束、内边距内联起始、 内边距内联结束属性和内边距块与内边距内联速记属性 另外定义了 流相对 内边距 长属性。 两组属性控制相同的内边距： 它们只是索引每个边的不同方式。

注意： 盒子上指定的背景 默认情况下在内边距边缘内布局并绘制。 （它们还会在边框下方绘制， 在 边框区域 内。） 此行为可以通过使用 background-origin 和 background-clip 属性进行调整。

4.1. 页面相对（物理）内边距属性： padding-top、 padding-right、 padding-bottom，以及 padding-left 属性

这些属性设置上、右、下和左侧的 内边距，作用于一个 盒，并按上述顺序分别对应。

内边距属性的负值无效。

4.2. 内边距速记：内边距 属性

内边距 属性是一个速记属性，用于同时设置 内边距上、内边距右、内边距下 和 内边距左 的属性声明。

如果只有一个值， 则应用于所有边。 如果有两个值， 第一个值用于上、下内边距， 第二个值用于左、右内边距。 如果有三个值， 第一个值用于上内边距， 第二个值用于左、右内边距， 第三个值用于下内边距。

body { padding: 2em }         /* 所有内边距设为 2em */
body { padding: 1em 2em }     /* 上 & 下 = 1em，左 & 右 = 2em */
body { padding: 1em 2em 3em } /* 上=1em，右=2em，下=3em，左=2em */

body {
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 3em;
  padding-left: 2em; /* 从对面侧（右侧）复制 */
}

5. 边框

边框 填充了 边框区域， 用以视觉上划定盒子的边界。 边框属性 指定了盒子的 边框区域 的厚度， 以及其绘制样式和颜色。 请参阅 CSS 背景 3 § 3 边框 以获取这些属性物理变体的定义；CSS 逻辑属性 1 § 4.5 流相对边框 另外定义了 流相对 的边框 长属性。 两组属性控制相同的边框： 它们只是索引每个边的不同方式。

6. 最近的变更

自 2024年4月1日工作草案 以来的变更包括：

• 允许组合使用 block 和 inline 关键字 在 margin-trim 中。 (问题 7884)

• 引入 shaped edge 和 unshaped edge 术语， 以便更容易地交叉引用这些概念。 (问题 5132)

自 2022年11月3日工作草案 以来的变更包括：

• 删除了 margin-trim 对浮动元素的影响， 因为修剪和不修剪它们的外边距各有用例， 并且实现起来很复杂。 (问题 8547)

• 澄清了只有后代的外边距会被 margin-trim 修剪，即使自有或兄弟外边距与修剪的外边距折叠。

• 引入了 shaped 和 unshaped 边缘 术语，应用于 盒子。 (问题 5132)

7. 自 CSS 第 3 级以来的更改

自 第 3 级 以来，本模块进行了以下更改：

• 新增 margin-trim 属性。

8. 自 CSS 第 2 级以来的更改

自 第 2 级 以来，本模块进行了以下更改：

• 调整了说明文，以考虑垂直 书写模式。
• 定义了 margin、padding 及其长属性适用于 ruby 基本容器 和 ruby 注解容器。

9. 隐私 考虑

本模块未报告隐私考虑事项。

10. 安全性考虑

本模块未报告安全性考虑事项。