目录
CSS包含框模型描述了文档树中元素产生的长方形包含框，它们根据可视化格式模型来布局。页面框是一类特殊的框，它的描述见页面介质一章。
每一个框都有一个内容区（如文本，图形等等）以及可选的环绕在周围的边白，边框以及边距区域；每个区域的尺寸由下面讨论的属性规定。下面这张图展示了这些区域如何相互关联，以及用来引用边距，边框和边白等部分的术语：
边距，边框和边白可以细分为左右顶底四部分（例如，在图形中，"LM"代表左边距，"RP"代表右边白，"TB"代表顶边框，等等）。
四个区域（内容，边白，边框和边距）的每一个边界称为一个“边”，因此，每一个框有四条边：
每一个边可以细分为左右顶底四类。
框的内容区尺寸——内容宽度和内容高度——取决于若干个因素：产生框的元素是否设置了'width'或'height'属性，框是否包含文本或其它框，框是否是一个表格等等。框的宽度和高度讨论，参见可视化格式模型的细节一章。
框的宽度由左右边距、左右边框、左右边白和内容的宽度相加得到。高度由顶底边距、顶底边框、顶底边白和内容的高度相加得到。
框的不同区域的背景样式是这样决定的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: black; /* text color is black */
background: gray; /* Content, padding will be gray */
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: black;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is longer
to illustrate wrapping.
</UL>
</BODY>
</HTML>
结果是一个文档树，带有（在其它关系中）一个UL元素，它有两个LI子元素。
下面的第一张图显示了本例的呈现结果。第二张图显示了UL元素及其子元素LI元素的边距、边白和边框之间的关系。
注意：
边距属性设置了一个框的边距区的宽度。'margin'缩写属性设置所有四边的边距，而其它的边距属性只设置它们代表的那一边的边距。
本节定义的属性引用<margin-width>值的类型，可以是下面值之一：
边距属性允许有负值，不过可能有与实现相关的限制。
| 值： | <margin-width> | inherit |
| 初始值： | 0 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | 相对于包含块的宽度 |
| 媒介： | 图形 |
这些属性设置框的顶，右，底，左边距。
H1 { margin-top: 2em }
| 值： | <margin-width>{1,4} | inherit |
| 初始值： | 对于缩写属性未定义 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | 相对于包含块的宽度 |
| 媒介： | 图形 |
'margin'是在样式表的同一处设置'margin-top'，'margin-right'，'margin-bottom'以及'margin-left'的缩写属性。
如果仅有一个值，它将应用于所有四边。如果有两个值，顶底边距设置为第一个值，左右边距设置为第二个值。如果有三个值，顶边距设置为第一个值，左右边距设置为第二个值，底边距设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边距。
BODY { margin: 2em } /* 所有的边距都设置为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; /* 从相对边（右边）拷贝而来 */
}
在本规范中，表述边距重合意味着两个或多个框（可能相邻也可能嵌套）的相邻的边距（其间没有边白或边框间隔）重合在一起而形成一个单一的边距。
CSS2中，水平边距永远不会重合。
垂直边距可能在特定的框之间重合：
请参见边距，边白和边框的示例一章，以了解边距重合的例子。
边白属性规定了一个框的边白区的宽度。'padding'缩写属性设置所有四边的边白，而其它的边白属性只设置它们代表的那一边的边白。
本节所定义的属性引用<padding-width>值类型，可以取下列值：
和边距属性不同，边白值不可以是负数。和边距属性相似，边白的百分比值也基于生成的框的包含块的宽度。
| 值： | <padding-width> | inherit |
| 初始值： | 0 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | 相对于包含块的宽度 |
| 媒介： | 图形 |
这些属性设置一个框的顶，右，底，左的边白。
BLOCKQUOTE { padding-top: 0.3em }
| 值： | <padding-width>{1,4} | inherit |
| 初始值： | 对于缩写属性未定义 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | 相对于包含块的宽度 |
| 媒介： | 图形 |
'padding'属性是在样式表中的同一处设置'padding-top'，'padding-right'，'padding-bottom'及'padding-left'的缩写属性。
如果只有一个值，它适用于所有四边。如果有两个值，顶底边白设置为第一个值而左右边距设置为第二个值。如果有三个值，顶边白设置为第一个值，左右边白设置为第二个值，底边白设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边白。
边白区域的表面颜色或图形由'background'属性确定：
H1 {
background: white;
padding: 1em 2em;
}
上例中指定垂直边白（'padding-top'和'padding-bottom'）为'1em'而水平边白（'padding-right'和'padding-left'）为'2em'。'em'单位是相对于元素的字体尺寸的单位：'1em'等于使用的字体的尺寸。
边框属性设置框的边框区的宽度，颜色和样式。这些属性使用于所有的元素。
注意。对于HTML而言，用户端对于某些元素（如按钮，菜单等）边框的渲染和其它“一般”元素可能有所不同。
边框宽度设置边框区的宽度。本节中定义的属性引用<border-width>值类型，可以取如下值：
前三个值的解释取决于用户端。不过必须遵循如下关系：
'thin' <='medium' <= 'thick'.
另外，在一个文档中，这些宽度必须保持一致。
| 值： | <border-width> | inherit |
| 初始值： | medium |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 图形 |
这些属性设置框的顶底左右边框的宽度。
| 值： | <border-width>{1,4} | inherit |
| 初始值： | 见个别属性 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 图形 |
该属性是在样式表的同一处设置'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> | inherit |
| 初始值： | 'color'属性的值 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 图形 |
| 值： | <color>{1,4} | transparent | inherit |
| 初始值： | 见个别属性 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 图形 |
'border-color'属性设置四个边框的颜色。它的值的含义如下：
'border-color'属性可以有一个到四个值，这些值设置不同的边，方法和'border-width'相同。
如果没有用边框属性指定一个元素的边框颜色，用户端必须用该元素的'color'属性来作为边框颜色的计算值。
下例中，边框是黑色实线。
P {
color: black;
background: white;
border: solid;
}
边框样式指定框的边框的线型（实线，双线，点线等）。本节中定义的属性引用<border-style>值类型，取值为：
所有的边框画在框的背景之上。'groove'，'ridge'，'inset'和'outset'类型的边框的颜色取决于元素的'color'属性。
和CSS一致的用户端可能将'dotted'，'dashed'，'double'，'groove'，'ridge'，'inset'及'outset'为'solid'。
| 值： | <border-style> | inherit |
| 初始值： | none |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 图形 |
| 值： | <border-style>{1,4} | inherit |
| 初始值： | 参见各个别属性 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 图形 |
'border-style'属性设置四边的样式。它可以有一个到四个值，分别设置不同的边，方法同'border-width'。
#xy34 { border-style: solid dotted }
上例中，水平边框是'solid'而垂直边框是'dotted'。
由于边框样式的初始值是'none'，因此，除非设置了边框样式，没有任何边框可见。
| 值： | [ <'border-top-width'> || <'border-style'> || <color> ] | inherit |
| 初始值： | 见各个别属性 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 图形 |
这是一个设置框的顶底左右边框的宽度，样式和颜色的缩写属性。
H1 { border-bottom: thick solid red }
上面这一规则将设置H1元素底边框的宽度，样式和颜色。省略掉的值将设置为它们各自的初始值。由于下面这一规则并没有指定边框颜色，边框的颜色将由'color'属性指定：
H1 { border-bottom: thick solid }
| 值： | [ <'border-width'> || <'border-style'> || <color> ] | inherit |
| 初始值： | 见各个别属性 |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 图形 |
'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-color: red;
border-left: double;
color: black
}
在上例中，左边框的颜色是黑色，而其它边框的颜色是红色。这是因为'border-left'设置了宽度，样式和颜色。由于'border-left'属性并没有给出颜色值，它将从'color'属性中获得值，并与'color'属性设置在'border-left'之后这一事实无关。