第7章曾讨论过，所有文档元素都生成一个矩形框，这称为元素框（element box），它描述了一个元素在文档布局中所占的空间大小，因此，网页设计中每个框都影响着其他元素框的位置和大小。例如，如果文档中第一个元素框是1英寸高，下一个框就至少会从文档顶端向下1英寸处开始。如果第一个元素框改为2英寸高，后面的各元素框都会向下移1英寸，第二个元素框将至少从文档顶端向下2英寸处开始。

默认地，一个可以显示的文档由多个矩形框组成，这些矩形框分布开，从而不会相互重叠。另外，网站建设中要根据某些限制，这些框要尽可能地少占空间，同时还要保证相互之间有足够的空间，以便清楚地看出哪些内容属于哪个元素。

注意：如果网站建设人员采用手工定位，框可能会重叠。另外如果在正常流元素上使用负的外边距，也可能出现视觉重叠。

为了充分理解如何处理外边距、内边距和边框，必须清楚地掌握框模型（这在第7章做过解释）。

宽度和高度

一个元素的width被定义为从左内边界到右内边界的距离，height被定义为上内边界到下内边界的距离。

对于这两个属性有一点很重要：它们不能应用到行内非替换元素。例如，如果你想声明一个超链接的height和width,网站建设CSS兼容的浏览器必须忽略这些声明。假设应用以下规则：

a:link {color: red; background: silver; height: 15px; width: 60px;}

width

值：<length>|<percentage>| auto | inherit

初始值：auto

应用于：块级元素和替换元素

继承性：无

百分数：相对于包含块的width

计算值：对于auto和百分数值，根据指定确定，否则是一个绝对长度，除非元素不能应用该属性（此时为auto）

最后会得到有银色背景的红色链接，其高度和宽度由链接的内容确定，将不会是15像素高60像素宽。

在本章中，为了使讨论更简单一些，我们假设元素的高度总是自动计算。如果一个元素有8行，每一行高度为1/8英寸，则元素的高度为1英寸，如果有10行，高度则为1.25英寸。无论哪一种情况，高度都由元素的内容来定，而不是由网站建设人员确定。正常流中的元素很少有设定的高度。

height

值：<length>I auto | inherit

初始值：auto

应用于：块级元素和替换元素

继承性：无

百分数：相对于包含块的height计算

计算值：对于auto和百分数值，根据指定确定，否则是一个绝对长度，除非元素不能应用该属性（此时为auto）

历史问题

在IE6之前，Windows平台的Internet Explorer在width和height方面并没有按网站建设CSS保证的那样做。以下是两个主要区别：

IE/Win使用width和height来定义可见元素柜的尺寸，而不是定义元素框的内容。如果定义一个元素的width为400px,IE/Win会使左外边框边界到右外边框边界之间的距离是400像素。换句话说，IE/Win使用width来描述元素内容区、左右内边距以及左右边框的总和。网站建设CSS3对此包含一些建议，允许创作人员决定width和height究竟是什么含义。

IE/Win对行内非替换元素应用了width和height属性。例如，如果对一个超链接应用了width和height，将根据所提供的值来绘制。

这两种行为在IE6中得到了修正，不过仅限于“标准”模式。如果IE6以“quirks”模式显示文档，还是会有前面描述的行为。

外边距与内边距

元素框在元素之间只提供了很少的空间，网页设计中有3种方法可以在元素外围生成额外的空间：可以增加内边距，或者增加外边距，还可以同时增加内边距和外边距。某些情况下，选择哪种方法并不重要。不过，如果元素有背景，则会影响你的决定，因为背景会延伸到内边距中，但不会延伸到外边距。

因此，为元素指定的内边距和外边距会影响元素的背景何时结束。如果为元素设置了背景色，可以清楚地看出二者的差别，有内边距的元素的背景范围更大，而有外边距的元素的背景则不受影响。