内容
CSS 盒模型描述了为文档树中的元素生成的矩形框，并按照视觉格式化模型进行布局。
每个盒都有一个 内容区（例如文本、图像等），以及可选的环绕 内边距、 边框和 外边距区域；每个区域的大小由下文定义的属性指定。下图展示了这些区域之间的关系以及用于指代外边距、边框和内边距各部分的术语。
外边距、边框和内边距可以细分为上、右、下、左四个段（例如，在图中，“LM”表示左外边距，“RP”表示右内边距，“TB”表示顶部边框，等）。
每个四个区域（内容、内边距、边框、外边距）的周边称为“边”，因此每个盒子都有四条边。
每条边缘都可以细分为上、右、下、左四条边。
盒子内容区的尺寸——内容宽度和内容高度——取决于多个因素：生成盒子的元素是否已设置'width'或'height'属性，盒子是否包含文本或其他盒子，盒子是否为表格等。盒子的宽度和高度在视觉格式化模型细节章节中讨论。
盒子内容、内边距和边框区域的背景样式由生成元素的 'background' 属性指定。外边距的背景始终是透明的。
本示例说明了外边距、填充和边框之间的相互作用。示例 HTML 文档
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: white; /* text color is white */
background: blue; /* Content, padding will be blue */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is
a bit longer to illustrate wrapping.
</UL>
</BODY>
</HTML>
产生的 文档树（除了其他关系外）包含一个 UL 元素，该元素有两个 LI 子元素。
下面的第一幅图示例展示了该示例的渲染结果。第二幅图示例展示了 UL 元素的外边距、内边距、边框与其子元素 LI 的外边距、内边距、边框之间的关系。（图形未按比例绘制。）
注意
外边距属性指定盒子外边距区域的宽度。'margin'简写属性一次性设置四侧外边距，而其它外边距属性只设置各自对应的侧。该属性适用于所有元素，但垂直外边距对非替换的行内元素不起作用。
本节定义的属性使用 <margin-width> 值类型，该类型可以取以下值之一：
允许外边距属性使用负值，但可能存在实现相关的限制。
| 值 | <margin-width> | inherit |
| 初始值 | 0 |
| 应用于 | 所有元素，除了表显示类型不是 table-caption、table 和 inline-table 的元素 |
| 可继承 | 否 |
| 百分比 | 参考包含块的宽度 |
| 媒体 | 视觉 |
| 计算值 | 按指定的百分比或绝对长度 |
这些属性对非替换的行内元素没有影响。
| 值 | <margin-width> | inherit |
| 初始值 | 0 |
| 应用于 | 所有元素，除了表显示类型不是 table-caption、table 和 inline-table 的元素 |
| 可继承 | 否 |
| 百分比 | 参考包含块的宽度 |
| 媒体 | 视觉 |
| 计算值 | 按指定的百分比或绝对长度 |
这些属性设置盒子的上、右、下、左外边距。
h1 { margin-top: 2em }
| 值 | <margin-width>{1,4} | inherit |
| 初始值 | 见各个属性 |
| 应用于 | 所有元素，除了表显示类型不是 table-caption、table 和 inline-table 的元素 |
| 可继承 | 否 |
| 百分比 | 参考包含块的宽度 |
| 媒体 | 视觉 |
| 计算值 | 见各个属性 |
'margin'属性是一个简写属性，用于在样式表的同一位置一次性设置'margin-top'、'margin-right'、'margin-bottom'和'margin-left'。
如果只有一个组件值，则该值适用于四侧。若有两个值，则上、下外边距使用第一个值，右、左外边距使用第二个值。若有三个值，则上使用第一个值，左、右使用第二个值，底使用第三个值。若有四个值，则分别对应上、右、下、左。
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
上例的最后一条规则等价于下面的示例：
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
在 CSS 中，两个或更多盒子的相邻外边距（它们可能是兄弟也可能不是）可以合并为单一外边距。以这种方式合并的外边距称为合并，合并后的外边距称为合并外边距。
相邻的垂直边距会折叠，但除外情况如下
水平外边距永不合并。
当且仅当满足下列条件时，两个外边距被视为相邻：
如果合并外边距的任意组成外边距与另一外边距相邻，则该合并外边距被视为与另一外边距相邻。
注意。相邻外边距可以由并非兄弟或祖先关系的元素产生。
注意 上述规则意味着：
当两个或更多外边距合并时，合并后外边距的宽度为所有合并外边距宽度的最大值。若出现负值外边距，则先取负外边距绝对值的最大值，从正外边距的最大值中减去该值。如果没有正外边距，则把所有相邻外边距绝对值的最大值从 0 中减去。
如果一个盒子的上下外边距相邻，则可以出现外边距“穿透合并”。此时，元素的位置取决于它与那些正被合并外边距的其他元素的相对关系。
请注意，被“穿透合并”的元素的位置对那些与之合并外边距的其他元素的位置没有影响；顶部边框边缘位置仅在布局这些元素的后代时才需要。
填充属性指定盒子 填充区的宽度。'padding'简写属性一次性设置四侧填充，而其它填充属性仅设置对应的一侧。
本节定义的属性使用 <padding-width> 值类型，可取以下值：
与外边距属性不同，内边距的值不能为负。与外边距一样，内边距的百分比值同样相对于生成盒子的包含块宽度。
| 值 | <padding-width> | inherit |
| 初始值 | 0 |
| 应用于 | 所有元素，除了 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 和 table-column |
| 可继承 | 否 |
| 百分比 | 参考包含块的宽度 |
| 媒体 | 视觉 |
| 计算值 | 按指定的百分比或绝对长度 |
这些属性设置盒子的上、右、下、左填充。
blockquote { padding-top: 0.3em }
| 值 | <padding-width>{1,4} | inherit |
| 初始值 | 见各个属性 |
| 应用于 | 所有元素，除了 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 和 table-column |
| 可继承 | 否 |
| 百分比 | 参考包含块的宽度 |
| 媒体 | 视觉 |
| 计算值 | 见各个属性 |
'padding'属性是一个简写属性，用于在样式表的同一位置一次性设置'padding-top'、'padding-right'、'padding-bottom'以及'padding-left'。
若只有一个组件值，则该值适用于四侧。若有两个值，则上、下填充使用第一个值，右、左填充使用第二个值。若有三个值，则上使用第一个值，左、右使用第二个值，底使用第三个值。若有四个值，则分别对应上、右、下、左。
内边距区域的表面颜色或图像通过 'background' 属性指定。
h1 {
background: white;
padding: 1em 2em;
}
上面的示例指定了“1em”的垂直填充（'padding-top' 和 'padding-bottom'）以及“2em”的水平填充（'padding-right' 和 'padding-left'）。“em”单位是相对于元素的字体大小的：1 em 等于正在使用的字体大小。
边框属性指定盒子边框区域的宽度、颜色和样式。这些属性适用于所有元素。
注意。特别是对于 HTML，用户代理可能会对某些用户界面元素（例如按钮、菜单等）的边框渲染方式与“普通”元素不同。
边框宽度属性指定边框区域的宽度。本节定义的属性涉及 <border-width> 值类型，该类型可以取下列值之一：
前三个值的解释取决于用户代理。但是，必须满足以下关系
‘thin’ <=‘medium’ <= ‘thick’。
此外，这些宽度在整个文档中必须保持一致。
| 值 | <border-width> | inherit |
| 初始值 | medium |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 媒体 | 视觉 |
| 计算值 | 绝对长度；如果边框样式为 'none' 或 'hidden'，则为 '0' |
这些属性设置盒子顶部、右侧、底部和左侧边框的宽度。
| 值 | <border-width>{1,4} | inherit |
| 初始值 | 见各个属性 |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 媒体 | 视觉 |
| 计算值 | 见各个属性 |
此属性是一个简写属性，用于在样式表的同一位置一次性设置'border-top-width'、'border-right-width'、'border-bottom-width'以及'border-left-width'。
若只有一个组件值，则该值适用于四侧。若有两个值，则上、下边框使用第一个值，右、左使用第二个值。若有三个值，则上使用第一个值，左、右使用第二个值，底使用第三个值。若有四个值，则分别对应上、右、下、左。
在下面的示例中，注释指示了上、右、下、左四条边框的实际宽度。
h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */
边框颜色属性指定盒子边框的颜色。
| 值 | <color> | transparent | inherit |
| 初始值 | 'color' 属性的值 |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 媒体 | 视觉 |
| 计算值 | 若取自 'color' 属性，则为计算得到的 color 值；否则按声明的值。 |
| 值 | [ <color> | transparent ]{1,4} | inherit |
| 初始值 | 见各个属性 |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 媒体 | 视觉 |
| 计算值 | 见各个属性 |
'border-color'属性设置四条边框的颜色。取值含义如下：
'border-color'属性可以有 1 到 4 个组件值，且这些值会像'border-width'那样分别对应各侧。
如果元素未通过边框属性指定边框颜色，用户代理必须使用元素的 'color' 属性值作为边框颜色的 计算值。
在本例中，边框将是一条实心的黑线。
p {
color: black;
background: white;
border: solid;
}
边框样式属性指定盒子边框的线型（实线、双线、虚线等）。本节定义的属性涉及 <border-style> 值类型，该类型可以取下列值之一：
所有边框都会绘制在盒子的背景之上。对于值为 'groove'、'ridge'、'inset'、'outset' 的边框，其颜色取决于元素的边框颜色属性，但用户代理可以自行采用算法来计算实际使用的颜色。例如，如果 'border-color' 的值为 'silver'，则 UA 可以使用从白色到深灰的颜色渐变来表示斜面边框。
| 值 | <border-style> | inherit |
| 初始值 | none（无） |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 媒体 | 视觉 |
| 计算值 | 按指定值 |
| 值 | <border-style>{1,4} | inherit |
| 初始值 | 见各个属性 |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 媒体 | 视觉 |
| 计算值 | 见各个属性 |
'border-style'属性设置四条边框的样式。它可以有 1 到 4 个组件值，且这些值会像'border-width'那样分别对应各侧。
#xy34 { border-style: solid dotted }
在上述示例中，水平边框为“solid”，垂直边框为“dotted”。
由于边框样式的初始值是“none”，除非显式设置样式，否则边框不可见。
| 值 | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| 初始值 | 见各个属性 |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 媒体 | 视觉 |
| 计算值 | 见各个属性 |
这是一个简写属性，用于一次性设置盒子上、右、下、左四条边框的宽度、样式和颜色。
h1 { border-bottom: thick solid red }
上述规则会为 H1 元素下方的边框设置宽度、样式和颜色。未指定的值将使用其初始值。因为后面的规则未指定边框颜色，边框将使用'color'属性所定义的颜色。
H1 { border-bottom: thick solid }
| 值 | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| 初始值 | 见各个属性 |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 媒体 | 视觉 |
| 计算值 | 见各个属性 |
'border'属性是一个简写属性，用于一次性为盒子四条边框设置相同的宽度、颜色和样式。与简写的'margin'和'padding'属性不同，'border'属性不能为四条边框指定不同的值。如需分别设置，必须使用其它单独的边框属性。
例如，下面第一条规则等价于随后显示的四条规则集合。
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
由于这些属性在某种程度上具有重叠的功能，因此指定规则的顺序非常重要。
考虑下面的示例
blockquote {
border: solid red;
border-left: double;
color: black;
}
在上面的示例中，左边框的颜色为黑色，其他边框为红色。这是因为 'border-left' 同时设置了宽度、样式和颜色。由于该属性未指定颜色值，颜色会从'color'属性中获取。'color'属性在 'border-left' 之后声明，这一点并不影响结果。
对于每个行盒，用户代理必须取得为每个元素生成的行内盒，并按照视觉顺序（而非逻辑顺序）渲染外边距、边框和填充。
当元素的'direction'属性为 'ltr' 时，元素所在的第一个行盒中生成的最左侧盒拥有左外边距、左边框和左填充；元素所在的最后一个行盒中生成的最右侧盒拥有右填充、右边框和右外边距。
当元素的'direction'属性为 'rtl' 时，元素所在的第一个行盒中生成的最右侧盒拥有右填充、右边框和右外边距；元素所在的最后一个行盒中生成的最左侧盒拥有左外边距、左边框和左填充。