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。）
为了方便起见，定义了以下值类型以表示常用的 <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. 页面相对（物理）外边距属性：外边距上、外边距右、外边距下 和 外边距左 属性
| 名称： | 外边距上、外边距右、外边距下、外边距左 |
|---|---|
| 值： | <长度-百分比> | auto |
| 初始值： | 0 |
| 适用于： | 除 内部表格元素、ruby 基本容器 和 ruby 注解容器 之外的所有元素 |
| 是否继承： | 否 |
| 百分比： | 参考包含块的 逻辑宽度 |
| 计算值： | 关键字 auto 或计算后的 <长度-百分比> 值 |
| 规范顺序： | 按照语法 |
| 动画类型： | 按计算值类型 |
| 逻辑属性组： | 外边距 |
这些属性分别设置盒子的上、右、下、左 外边距。
外边距属性允许负值， 但可能存在特定实现的限制。
3.2. 外边距速记：外边距 属性
| 名称： | 外边距 |
|---|---|
| 值： | <'margin-top'>{1,4} |
| 初始值： | 0 |
| 适用于： | 除 内部表格元素、ruby 基本容器 和 ruby 注解容器 之外的所有元素 |
| 是否继承： | 否 |
| 百分比： | 参考包含块的 逻辑宽度 |
| 计算值： | 参见各个属性 |
| 规范顺序： | 按照语法 |
| 动画类型： | 按计算值类型 |
外边距 属性是用于同时设置 外边距上、外边距右、外边距下 和 外边距左 的速记属性。
如果只有一个值， 则应用于所有边。 如果有两个值， 第一个值用于上、下外边距， 第二个值用于左、右外边距。 如果有三个值， 第一个值用于上外边距， 第二个值用于左、右外边距， 第三个值用于下外边距。 如果有四个值， 它们分别应用于上、右、下、左外边距。
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 属性
| 名称： | margin-trim |
|---|---|
| 值： | none | [ block || inline ] | [ block-start || inline-start || block-end || inline-end ] |
| 初始值： | none |
| 适用于： | 块容器、多列容器、弹性容器、网格容器 |
| 是否继承： | 否 |
| 百分比： | 不适用 |
| 计算值： | 表示修剪哪些边的零到四个关键字的集合 |
| 规范顺序： | 按照语法 |
| 动画类型： | 离散 |
通常希望在兄弟元素之间设置外边距， 但不希望在容器的起始/结束处设置外边距， 这时可以通过内边距来控制间距。 该属性允许容器修剪其子元素的外边距， 使其与容器的边缘相邻。其值的含义如下：
- none
-
容器不修剪外边距。
注意： 但是，在块布局中， 子元素的外边距可以与其父元素折叠。 参见 CSS2§8.3.1：折叠的外边距。
- block-start
- inline-start
- inline-end
- block-end
- inline-start
- 对于由此容器包含的流内盒子， 与容器指定边相邻的外边距被修剪为零。 它还会修剪与此类外边距折叠的任何后代外边距 （但不会修剪其自身、兄弟或祖先的外边距）。
- 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. 页面相对（物理）内边距属性：内边距上、内边距右、内边距下 和 内边距左 属性
| 名称： | 内边距上、内边距右、内边距下、内边距左 |
|---|---|
| 值： | <长度-百分比 [0,∞]> |
| 初始值： | 0 |
| 适用于： | 除：内部表格元素（不包括表格单元格）、ruby 基本容器 和 ruby 注解容器 之外的所有元素 |
| 是否继承： | 否 |
| 百分比： | 参考包含块的 逻辑宽度 |
| 计算值： | 计算后的 <长度-百分比> 值 |
| 规范顺序： | 按照语法 |
| 动画类型： | 按计算值类型 |
| 逻辑属性组： | 内边距 |
这些属性分别设置盒子的上、右、下、左 内边距。
内边距属性的负值无效。
4.2. 内边距速记：内边距 属性
| 名称： | 内边距 |
|---|---|
| 值： | <'padding-top'>{1,4} |
| 初始值： | 0 |
| 适用于： | 除 内部表格元素（不包括表格单元格）、ruby 基本容器 和 ruby 注解容器 之外的所有元素 |
| 是否继承： | 否 |
| 百分比： | 参考包含块的 逻辑宽度 |
| 计算值： | 参见各个属性 |
| 规范顺序： | 按语法 |
| 动画类型： | 按计算值类型 |
内边距 属性是一个速记属性，用于同时设置 内边距上、内边距右、内边距下 和 内边距左 的属性声明。
如果只有一个值， 则应用于所有边。 如果有两个值， 第一个值用于上、下内边距， 第二个值用于左、右内边距。 如果有三个值， 第一个值用于上内边距， 第二个值用于左、右内边距， 第三个值用于下内边距。
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 修剪，即使自有或兄弟外边距与修剪的外边距折叠。
7. 自 CSS 第 3 级以来的更改
自 第 3 级 以来，本模块进行了以下更改：
- 新增 margin-trim 属性。
8. 自 CSS 第 2 级以来的更改
自 第 2 级 以来，本模块进行了以下更改：
9. 隐私 考虑
本模块未报告隐私考虑事项。
10. 安全性考虑
本模块未报告安全性考虑事项。