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

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

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

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

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

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

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

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

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

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

垂直屬性

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

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

這7個(gè)屬性的值必須等于元素包含塊的height。這往往是塊級(jí)元素父元素的height值（因?yàn)閴K級(jí)元素的父元素幾乎都是塊級(jí)元素）。

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

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

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

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

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