CSS方框模型模块级别3

1介绍

本小节不规范。

CSS描述了每个元素如何以及源文档中的每个文本字符串通过转换元素树成为一组盒,其尺寸、位置和堆叠水平帆布取决于其CSS属性的值。

注： CSS级联和继承描述如何将属性分配给方框树中的元素，虽然CSS显示3§1简介描述了如何元素树转化为箱型树.

每个CSS箱具有矩形内容区域，围绕内容的一段填充，衬垫周围的边框，和边界外的边距。这个调整大小属性 [css-sizing-3],以及控制布局的各种其他属性，定义内容区域的大小。盒子样式属性-衬垫以及它的长柄，边境和它的长手，和边缘和它的长手——定义这些其他区域的大小。

边距和衬垫在本模块中定义。边框在中有类似的定义[css-背景-3].

注：此模块仅定义身体的每侧长手属性。其他，流量相关的 长手属性在中定义[css-logical-1].请注意，这两组长手属性控制相同保证金/衬垫:它们只是索引每一面的不同方式。

1.1.价值定义

本规范遵循CSS属性定义约定从【CSS2】使用值定义语法从[CSS-值-3].本规范中未定义的值类型在CSS值和单位中定义[CSS-值-3].与其他CSS模块结合可以扩展这些值类型的定义。

除了定义中列出的特性特定值外，本规范中定义的所有属性也接受CSS-wide关键字作为其属性值。为了可读性，它们没有被明确地重复。

1.2.模块交互

此模块替换了边距和填充属性的定义定义于[CSS2]第8.1、8.2、8.3（但不是8.3.1）和8.4节。

此模块中的所有属性都应用于：：一线和：：第一个字母伪元素。

2CSS方框模型

每个盒子都有一个内容区（包含其内容-文本、子体框、图像或其他更换的元件内容等）和可选的周围环境衬垫,边境,和边缘区域;每个区域的大小由相应的属性指定，并且可以为零（如果是边距，则为负数）。下图显示了这些区域之间的关系以及用于指代箱子各部分的术语：

框的内容、填充和边框区域的背景由其指定背景属性。边界区域还可以使用边界样式进行绘制使用边境属性。边距始终是透明的。请参见[css-背景-3].

边距、边框和填充可以细分为顶部、右侧、底部和左侧线段，每个都可以独立控制通过其相应的属性。

2.1.盒子和边缘

四个区域的周长（内容、填充、边框和边距）被称为边缘,和每个边缘可以分解为顶部、右侧、底部和左侧。因此，每个箱有四个边缘每个由四个侧面组成：

内容边缘或内边缘

内容边缘环绕长方体的宽度和高度给出的矩形，这通常取决于元素的内容和/或其包含块大小。The four sides of the内容边缘在一起定义框的内容框.

补白边缘

填充边缘围绕盒子的衬垫。如果给定边上的填充宽度为零，填充边缘与该侧的内容边缘重合。The four sides of the补白边缘在一起定义框的填料箱,其中包含内容和填充区域.

边界边缘

边框边缘围绕着框的边框。如果给定边上的边框宽度为零，边框边缘与该侧的填充边缘重合。The four sides of the边界边缘在一起定义框的边框框,其中包含盒子的内容,衬垫,和边境地区.

边距边缘或外边缘

边距边缘围绕着框的边距。如果裕度在给定侧上具有零宽度，边缘边缘与该侧的边界边缘重合。The four sides of the边距边缘在一起定义框的边距框,其中包含所有盒子的内容,衬垫,边境,和边缘区域.

2.2.碎片化

当一个盒子碎片-跨行或跨页拆分为单独的盒子碎片-每个盒子(内容框,填料箱,边框框,边距框)也是碎片。内容/填充/边框/边距区域对碎片的反应在中指定[css-break-3]并由箱式减压器属性。

2.3.Boxedge关键字

以下内容<框>定义CSS关键字以供使用在属性中（例如变压器箱和背景幻灯片)需要参考各种长方体边缘：

内容框

指的是内容框或内容边缘.（在SVG上下文中，视为填充盒.)

填充框

指的是填料箱或补白边缘.（在SVG上下文中，视为填料箱.)

边箱

指的是边框框或边界边缘.（在SVG上下文中，视为冲程箱.)

保证金箱

指的是边距框或边缘.（在SVG上下文中，视为冲程箱.)

填充盒

指的是对象边界框或其边缘。（在CSS框上下文中，视为内容框.)

冲程箱

指的是笔划边界框或其边缘。（在CSS框上下文中，视为边箱.)

查看框

指最近的SVG视口元素的原点框,它是一个有宽度和高度的矩形初始SVG的用户坐标系由视图框属性，定位为使其左上角固定在坐标系原点。（在CSS框上下文中，视为边箱.)

注：当视图框包括非零最小-x或min-y（分钟-年）偏移，这原点框实际上并不对应到由视图框!

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

<可视框>=内容框|填充框|边箱<布局框>=<可视框> |保证金箱<颜料盒>=<可视框> |填充盒|冲程箱<坐标箱>=<颜料盒> |查看框

3边距

边距围绕方框的边界边缘，提供框之间的间距。这个保证金属性指定厚度的边缘区域一个盒子。这个边缘 缩写性质设置所有四边的边距而保证金长手特性只设置各自的边。本节定义了身体的 边缘 双手修长.（附加流量相关的 边缘 拉手定义于[css-logical-1].)

注：中的相邻边距区块布局可以崩溃.请参见CSS2§8.3.1崩溃边缘了解详细信息。此外，相邻的页边距碎片断裂有时会被截断。请参见CSS碎片3§5.2休息时的相邻边距了解详细信息。

3.1.页面相关（物理）边距属性：边缘顶部,边缘向右,边缘-底部、和边缘左侧属性

这些属性设置顶部、右侧、底部和左侧边缘的箱分别是。

允许裕度属性的负值，但可能存在特定于实现的限制。

注：应用于内部红宝石盒子 [CSS-RUBY-1]本规范中未定义。

3.2.边距速记：边缘财产

这个边缘属性是设置的简写属性边缘顶部,边缘向右,边缘底部、和边缘左侧在单个声明中。

如果只有一个分量值，它适用于所有方面。如果有两个值，上下边距设置为第一个值左右边距设置为第二个。如果有三个值，顶部被设置为第一值，左侧和右侧设置为第二个，底部设置为第三个。如果有四个值它们分别适用于顶部、右侧、底部和左侧。

正文{margin:2em}/*所有边距设置为2em*/正文{margin:1em 2em}/*顶部和底部=1em，右侧和左侧=2em*/正文{margin:1em 2em 3em}/*顶部=1em，右侧=2em，底部=3em，左侧=2em*/

车身{边缘顶部：1em；边缘-右侧：2em；边缘-底部：3em；左边边距：2em；/*从对面复制（右）*/}

4衬垫

衬垫在内容边缘之间插入和盒子的边沿，提供内容和边框之间的间距。这个填充属性指定厚度的填充区域一个盒子。这个衬垫 缩写性质设置所有四边的填充而填充长手特性只设置各自的边。本节定义身体的 衬垫 拉手.（附加流量相关的 衬垫 拉手定义于[css-logical-1].)

注：方框上指定的背景默认情况下在填充边缘内进行布局和绘制。（在边界下方额外涂漆，在中边境地区.)这种行为可以调整使用背景原语和背景幻灯片属性。

4.1.页面相关（物理）填充属性：padding-top（填充顶部）,右边距,底部间隙、和向左填充属性

这些属性设置顶部、右侧、底部和左侧衬垫的箱分别是。

填充属性的负值无效。

注：应用于内部红宝石盒子 [CSS-RUBY-1]未在本规范中定义。

4.2.填充速记：衬垫财产

这个衬垫属性是设置的简写属性padding-top（填充顶部）,右边距,底部间隙、和向左填充在单个声明中。

如果只有一个分量值，它适用于所有方面。如果有两个值，顶部和底部填充设置为第一个值并且将右侧和左侧填充设置为第二个。如果有三个值，顶部被设置为第一值，左侧和右侧设置为第二个，底部设置为第三个。

body{padding:2em}/*所有padding设置为2em*/正文{padding:1em 2em}/*顶部和底部=1em，右侧和左侧=2em*/正文{padding:1em 2em 3em}/*顶部=1em，右侧=2em，底部=3em，左侧=2em*/

车身{衬垫顶部：1厘米；向右填充：2em；填充底部：3em；向左填充：2em；/*从对面复制（右）*/}

5边框

边框填充边境地区,以直观地描绘盒子的边缘，这个边框属性指定厚度的边境地区一个盒子，以及它的绘画风格和颜色。请参见[css-背景-3]对于这些属性的定义，包括他们的身体的拉手。（附加流量相关的边境拉手定义于[css-logical-1].)

6变化

6.1.最近的更改

只有轻微的编辑调整自从2023年4月6日建议:

• 将一些副标题添加到§2 CSS盒子模型并相应地移动一段。

• 将中的“文档树”更改为“元素树”§1简介与中使用的术语保持一致[css-display-3].

• 将“逻辑属性组”行添加到属性定义表中。

6.2.自CSS级别2以来的更改

对此模块进行了以下更改自从CSS级别2:

• 将内部红宝石盒的应用程序标记为在此级别中未定义。
• 对散文稍作修改以说明垂直方向写入模式.
• 与中的相关概念交叉链接[css-break-3]和[css-背景-3].
• 提供集中通用定义引用各种框边的关键字用于本规范以外定义的属性（例如。背景幻灯片)避免重复（以及由此产生的不可避免的同步错误）。

7隐私注意事项

本模块未报告隐私问题。

8安全注意事项

此模块未报告任何安全注意事项。