垂直格式化類似于水平格式化，塊級元素的垂直格式化也有自己一系列有意思的行為。一個元素的默認(rèn)高度由其內(nèi)容決定。高度還會受內(nèi)容寬度的影響，段落越窄，相應(yīng)地就會越高，以便容納其中所有的內(nèi)聯(lián)內(nèi)容。

在網(wǎng)站建設(shè)中，可以對任何塊級元素設(shè)置顯式高度，如果這樣做，其結(jié)果取決于另外一些因素。假設(shè)指定高度大于顯示內(nèi)容所需的高度：

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

在這種情況下，多余的高度會產(chǎn)生一個視覺效果，就好像有額外的內(nèi)邊距一樣。不過假設(shè)高度小于顯示內(nèi)容所需的高度：

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

如果是這樣，瀏覽器會提供某種方法來査看所有內(nèi)容，而不是增加元素框的高度。瀏覽器可能會向元素增加一個滾動條，如圖7-13所示，

圖7-13：高度與元素內(nèi)容高度不匹配

如果元素內(nèi)容的高度大于元素框的高度，用戶代理的具體行為將取決于overflow屬性的值（及用戶代理對這個屬性的支持程度）。這種情況將在第10章討論。

在網(wǎng)站建設(shè)中，如果元素不是替換元素（如圖像），用戶代理會忽略除auto以外的所有其他height:值。在CSS2和CSS2.1中，height值不能忽略，只有一種特定情況除外，即如果涉及到百分?jǐn)?shù)值，也許會忽略height值，這種情況稍后討論。

像width—樣，height定義了內(nèi)容區(qū)的高度，而不是可見元素框的高度。元素框上下的內(nèi)邊距、邊距或外邊距都會增加到height值。

垂直屬性

與水平格式化的情況一樣，網(wǎng)頁設(shè)計中垂直格式化也有7個相關(guān)的屬性：margin-top、border-top、padding-top、height、 padding-bottom，border-bottom和margin-bottom 這些屬性如圖7-14所示。

圖7-14：垂直格式化的“7大屬性”

這7個屬性的值必須等于元素包含塊的height。這往往是塊級元素父元素的height值（因為塊級元素的父元素幾乎都是塊級元素）。

這7個屬性中只有3個屬性可以設(shè)置為auto:元素內(nèi)容的height以及上、下外邊距。上、下內(nèi)邊距和邊框必須設(shè)置為特定的值，或者默認(rèn)為0（如果沒有聲明border-style）。如果已經(jīng)設(shè)置了border-style，邊框的寬度會設(shè)置為值medium （這個值的定義并不明確）。圖7-15展示了如何記住元素框中的哪些部分可以有auto值，而哪些部分不可以。

圖7-15：可以設(shè)置為auto的垂直屬性

有意思的是，如果正常流中一個塊元素的margin-top或margin-bottom設(shè)置為auto，它會自動計算為0。遺憾的是，如果值為0，就不能很容易地將正常流元素在其包含塊中垂直居中。這也說明，網(wǎng)頁設(shè)計中如果將一個元素的上、下外邊距設(shè)置為auto，實際上它們都會重置為0，使元素框沒有外邊距。

注意：對于定位元素來說，上、下外邊距為auto時，其處理有所不同，有關(guān)的更多詳細(xì)內(nèi)容參見第10章。

height必須設(shè)置為auto或者是某種類型的非負(fù)值。