1. 介绍
本小节非规范性。
CSS 描述了如何通过将元素树 转换为一组盒子来布局源文档中的每个元素和每个文本字符串，这些盒子的大小、位置和在画布上的堆叠层级取决于它们的 CSS 属性值。
注意： CSS 级联和继承描述了属性如何分配给盒子树中的元素， 而CSS Display 3 § 1 介绍描述了元素树如何转换为盒子树。
每个 CSS 盒子 都有一个矩形的内容区域， 其内容周围有一条填充带， 填充带周围有一个边框， 边框外有一个边距。 尺寸属性 [css-sizing-3]， 以及控制布局的各种其他属性， 定义了内容区域的大小。 盒子样式属性—填充及其长格式属性，边框及其长格式属性， 以及边距及其长格式属性—定义了这些其他区域的大小。
边距和填充在本模块中定义。边框同样在[css-backgrounds-3]中定义。
注意：本模块仅定义了物理每侧的长格式属性。 另外，流相关 长格式属性在[css-logical-1]中定义。 请注意，这两组长格式属性控制相同的边距/填充： 它们只是不同的侧面索引方式。
CSS 盒子模块的历史和块布局的定义
该模块最初包含与盒子生成（现定义在[css-display-3]）， 盒模型（此处定义）， 以及块布局（现在仅定义在[CSS2]第9章和第10章）有关的CSS第3级规范文本。 由于在开发CSS2.1期间其维护工作被搁置， 到CSS2修订版1最终完成时，其文本已经严重过时。 因此，块布局部分的文本已被淘汰， 以便重新同步到CSS2并更新， 以便在未来某个时间点作为新块布局模块的输入。 它被拆分出来 以及CSS Display模块， 一方面是出于实际考虑，即工作量将非常巨大， 另一方面是考虑到CSS现在有多个布局模型 （弹性布局，网格布局，定位布局， 以及表格布局， 除了块布局外） 这些都值得拥有自己独立的模块。
1.1. 值定义
本规范遵循CSS 属性定义惯例，使用来自[CSS2]的值定义语法。 本规范未定义的值类型在CSS值与单位[CSS-VALUES-3]中定义。 与其他CSS模块的组合可能会扩展这些值类型的定义。
除了在其定义中列出的特定于属性的值外， 本规范中定义的所有属性 也接受 CSS-wide关键字 作为其属性值。 为了可读性，它们没有被明确地重复列出。
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. 盒子和边缘
每个区域的周边 （内容、填充、边框和边距） 被称为边缘， 每个边缘可以分为 上、右、下、左四个侧面。 因此，每个盒子 有四个边缘，每个边缘由四个侧面组成：
- 内容边缘 或 内边缘
- 内容边缘围绕着 由盒子的宽度和高度给出的矩形， 这通常取决于元素的内容 和/或其包含块的大小。 内容边缘的四个侧面共同 定义了盒子的内容盒。
- 填充边缘
- 填充边缘围绕着 盒子的填充部分。 如果填充在某一侧的宽度为零， 则该侧的填充边缘与内容边缘重合。 填充边缘的四个侧面共同 定义了盒子的填充盒， 它包含了内容和填充区域。
- 边框边缘
- 边框边缘围绕着盒子的边框。 如果边框在某一侧的宽度为零， 则该侧的边框边缘与填充边缘重合。 边框边缘的四个侧面共同 定义了盒子的边框盒， 它包含了盒子的内容、填充， 和边框区域。
- 边距边缘 或 外边缘
- 边距边缘围绕着盒子的边距。 如果边距在某一侧的宽度为零， 则该侧的边距边缘与边框边缘重合。 边距边缘的四个侧面共同 定义了盒子的边距盒， 它包含了盒子的所有内容、填充、边框， 和边距区域。
2.2. 碎片化
当一个盒子碎片化时——如跨行或跨页被分割为单独的盒子碎片——其所有的盒子 （内容盒、填充盒、边框盒、边距盒） 也会碎片化。 内容/填充/边框/边距区域如何应对碎片化 在[css-break-3]中指定，并由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宽度和高度的矩形用户坐标系，由该元素的
viewBox属性建立， 其左上角定位在坐标系原点。 （在CSS盒上下文中，被视为border-box。）注意：当
viewBox包含非零min-x或min-y偏移时， 该原点框实际上并不对应由viewBox定义的可见区域矩形！
为了方便起见，定义了以下值类型 以表示常用的<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. 边距
边距围绕着盒子的边框边缘， 在盒子之间提供间距。 边距属性指定了盒子的边距区域的厚度。 margin 简写属性设置所有四个边的边距， 而边距长格式属性只设置各自的边。 本节定义了物理边距长格式。 （附加的流相关边距长格式在[css-logical-1]中定义。）
注意： 块布局中的相邻边距可能会折叠。 详见CSS2§8.3.1 边距折叠。 此外，与碎片化断点相邻的边距有时会被截断。 详见CSS Fragmentation 3 § 5.2 断点处的相邻边距。
3.1. 页面相关（物理）边距属性：margin-top、 margin-right、margin-bottom 和 margin-left 属性
| 名称： | margin-top、margin-right、margin-bottom、margin-left |
|---|---|
| 值： | <length-percentage> | auto |
| 初始值： | 0 |
| 适用于： | 所有元素，内部表元素除外 |
| 是否继承： | 否 |
| 百分比： | 相对于包含块的逻辑宽度 |
| 计算值： | 关键字auto或计算的<length-percentage>值 |
| 规范顺序： | 按照语法 |
| 动画类型： | 按计算值类型 |
| 逻辑属性组： | margin |
边距属性允许使用负值， 但可能存在特定实现的限制。
注意： 本规范未定义对内部ruby盒子的应用，详见[CSS-RUBY-1]。
3.2. 边距简写：margin 属性
| 名称： | margin |
|---|---|
| 值： | <'margin-top'>{1,4} |
| 初始值： | 0 |
| 适用于： | 参见各个属性 |
| 是否继承： | 否 |
| 百分比： | 相对于包含块的逻辑宽度 |
| 计算值： | 参见各个属性 |
| 规范顺序： | 按照语法 |
| 动画类型： | 按计算值类型 |
margin 属性是用于同时设置margin-top、margin-right、margin-bottom 和 margin-left 的简写属性。
如果只有一个组件值， 它适用于所有边。 如果有两个值， 第一个值应用于上下边距， 第二个值应用于左右边距。 如果有三个值， 第一个值应用于上边， 第二个值应用于左右边， 第三个值应用于下边。 如果有四个值， 它们分别适用于上、右、下、左四个边。
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; /* 从对面（右边）复制过来 */
}
4. 填充
填充被插入在盒子的内容边缘 和填充边缘之间， 在内容和边框之间提供间距。 填充属性指定了盒子的填充区域的厚度。 padding 简写属性设置所有四个边的填充， 而填充长格式属性只设置各自的边。 本节定义了物理填充长格式。 （附加的流相关填充长格式在[css-logical-1]中定义。）
注意： 盒子上指定的背景 默认情况下在填充边缘内布局并绘制。 （它们还会在边框下方绘制， 在边框区域中。） 此行为可以通过使用background-origin 和 background-clip 属性进行调整。
4.1. 页面相关（物理）填充属性：padding-top、padding-right、padding-bottom 和 padding-left 属性
| 名称： | padding-top、padding-right、padding-bottom、padding-left |
|---|---|
| 值： | <length-percentage [0,∞]> |
| 初始值： | 0 |
| 适用于： | 所有元素，内部表元素除外，表格单元格除外 |
| 是否继承： | 否 |
| 百分比： | 相对于包含块的逻辑宽度 |
| 计算值： | 计算的<length-percentage>值 |
| 规范顺序： | 按照语法 |
| 动画类型： | 按计算值类型 |
| 逻辑属性组： | padding |
填充属性的负值是无效的。
注意： 本规范未定义对内部ruby盒子的应用，详见[CSS-RUBY-1]。
4.2. 填充简写：padding 属性
| 名称： | padding |
|---|---|
| 值： | <'padding-top'>{1,4} |
| 初始值： | 0 |
| 适用于： | 参见各个属性 |
| 是否继承： | 否 |
| 百分比： | 相对于包含块的逻辑宽度 |
| 计算值： | 参见各个属性 |
| 规范顺序： | 按照语法 |
| 动画类型： | 按计算值类型 |
padding 属性是用于同时设置padding-top、padding-right、padding-bottom 和 padding-left 的简写属性。
如果只有一个组件值， 它适用于所有边。 如果有两个值， 第一个值应用于上下填充， 第二个值应用于左右填充。 如果有三个值， 第一个值应用于上边， 第二个值应用于左右边， 第三个值应用于下边。
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-backgrounds-3]中对这些属性的定义， 包括它们的物理长格式属性。 （附加的流相关边框长格式属性在[css-logical-1]中定义。）
6. 更改
6.1. 最近的更改
自2023年4月6日的推荐标准以来，仅进行了小幅编辑调整：
-
为§ 2 CSS盒模型添加了一些小标题，并相应地移动了一段。
-
在§ 1 简介中将“文档树”更改为“元素树”，以与[css-display-3]中使用的术语保持一致。
-
在属性定义表中添加了“逻辑属性组”一行。
6.2. 自CSS Level 2以来的更改
自CSS Level 2以来，本模块进行了以下更改：
- 将对内部ruby盒子的应用标记为在本级别中未定义。
- 略微调整了描述文本，以考虑垂直书写模式。
- 交叉链接到相关概念，如[css-break-3]和[css-backgrounds-3]。
- 提供了一个集中的通用定义，用于引用各种盒子边缘的关键字， 供在本规范之外定义的属性使用 （例如background-clip）， 以避免重复（以及由此导致的不可避免的同步错误）。
7. 隐私考虑
关于此模块没有报告任何隐私方面的考虑。
8. 安全考虑
关于此模块没有报告任何安全方面的考虑。