垂直格式化类似于水平格式化，块级元素的垂直格式化也有自己一系列有意思的行为。一个元素的默认高度由其内容决定。高度还会受内容宽度的影响，段落越窄，相应地就会越高，以便容纳其中所有的内联内容。

在网站建设中，可以对任何块级元素设置显式高度，如果这样做，其结果取决于另外一些因素。假设指定高度大于显示内容所需的高度：

<p style="height: 10em;">

在这种情况下，多余的高度会产生一个视觉效果，就好像有额外的内边距一样。不过假设高度小于显示内容所需的高度：

<p style="height: 3em;">

如果是这样，浏览器会提供某种方法来査看所有内容，而不是增加元素框的高度。浏览器可能会向元素增加一个滚动条，如图7-13所示，

图7-13：高度与元素内容高度不匹配

如果元素内容的高度大于元素框的高度，用户代理的具体行为将取决于overflow属性的值（及用户代理对这个属性的支持程度）。这种情况将在第10章讨论。

在网站建设中，如果元素不是替换元素（如图像），用户代理会忽略除auto以外的所有其他height:值。在CSS2和CSS2.1中，height值不能忽略，只有一种特定情况除外，即如果涉及到百分数值，也许会忽略height值，这种情况稍后讨论。

像width—样，height定义了内容区的高度，而不是可见元素框的高度。元素框上下的内边距、边距或外边距都会增加到height值。

垂直属性

与水平格式化的情况一样，网页设计中垂直格式化也有7个相关的属性：margin-top、border-top、padding-top、height、 padding-bottom，border-bottom和margin-bottom 这些属性如图7-14所示。

图7-14：垂直格式化的“7大属性”

这7个属性的值必须等于元素包含块的height。这往往是块级元素父元素的height值（因为块级元素的父元素几乎都是块级元素）。

这7个属性中只有3个属性可以设置为auto:元素内容的height以及上、下外边距。上、下内边距和边框必须设置为特定的值，或者默认为0（如果没有声明border-style）。如果已经设置了border-style，边框的宽度会设置为值medium （这个值的定义并不明确）。图7-15展示了如何记住元素框中的哪些部分可以有auto值，而哪些部分不可以。

图7-15：可以设置为auto的垂直属性

有意思的是，如果正常流中一个块元素的margin-top或margin-bottom设置为auto，它会自动计算为0。遗憾的是，如果值为0，就不能很容易地将正常流元素在其包含块中垂直居中。这也说明，网页设计中如果将一个元素的上、下外边距设置为auto，实际上它们都会重置为0，使元素框没有外边距。

注意：对于定位元素来说，上、下外边距为auto时，其处理有所不同，有关的更多详细内容参见第10章。

height必须设置为auto或者是某种类型的非负值。