塊級元素的表現有時可以預測，有時則很讓人驚訝。例如，元素沿橫軸和豎軸擺放時，其處理就可能不同，為了充分了解如何處理塊級元素，必須對一些邊界和區(qū)域很清楚。

一般地，網頁設計中一個元素的width被定義為從左內邊界到右內邊界的距離，height則是從上內邊界到下內邊界的距離。這些屬性都可以應用到元素。

不同的寬度、高度、內邊距和外邊距相結合，就可以確定文檔的布局。在大多數情況下，文檔的高度和寬度由瀏覽器自動確定，這要基于可用的顯示區(qū)域和其他一些因素。當然在CSS網站制作中，可以更直接地控制元素的大小以及顯示方式。對于水平和垂直布局，可以選擇不同的效果，所以我們將分別介紹。

水平格式化

水平格式化往往比你想象得更復雜。其部分復雜性在于width影響的是內容區(qū)的寬度，而不是整個可見的元素框?？紤]以下例子：

<p style="widch: 200px;">wideness?</p>

這行代碼使段落的內容區(qū)寬度為200像素。如果為元素指定一個背景，就能很清楚地看出。不過，如果網頁設計中還指定了內邊距、邊框或外邊距，這些都會增加到寬度值。假設指定如下：

<p style="width: 200px; padding: 10px; margin: 20px;">wideness?</p>

可見元素框的寬度現在是220像素，因為在內容的左邊和右邊分別增加了10像素的內邊距。外邊距則會在左右兩邊再延伸20像素，使整個元素框的寬度為260像素。

一定要知道這樣會隱式地增加width值，理解這一點很重要。大多數用戶認為，width 是指可見元素框的寬度，如果為一個元素聲明了內邊距、邊框以及寬度，他們指定的寬度值則是左外邊界到右外邊界的距離。但在CSS中并不是這樣。一定要牢牢記住這一點，以免以后糊涂。

注意：在寫作本書時，CSS的Box Model模塊提供了一些建議，提出了一些方法來允許創(chuàng)作人員決定width是指內容寬度還是可見框寬度。

對此有一個很簡單的規(guī)則，正常流中塊級元素框的水平部分總和就等于父元素的width。假設一個div中有兩個段落，這兩個段落的外邊距設置為1em。段落的內容寬度（width 的值）再加上其左、右內邊距，邊框或外邊距，加在一起正好是div內容區(qū)的width,

假設div的width為30em，那么各段落內容寬度、內邊距，邊框或外邊距的總和就是30em。在圖7-3中，段落外的“空白”實際上是其外邊距。如果div有內邊距，還會有更大的空白，不過這里div沒有內邊距。稍后就會討論內邊距。

水平屬性

網頁設計中水平格式化的“7大屬性”是：margin-left、border-left, padding-left、width、 padding-right、border-right和margin-right。這些屬性與塊級框的水平布局有關，如圖7-4所示。

這7個屬性的值加在一起必須是元素包含塊的寬度，這往往是塊元素的父元素的width 值（因為塊級元素的父元素幾乎都是塊級元素。

圖7-3：元素框與其父元素的width相同

圖7-4：水平格式化的“7大屬性”

在這7個屬性中，只有3個屬性可以設置為auto:元素內容的width，以及左、右外邊距。其余屬性必須設置為特定的值，或者默認寬度為0，圖7-5顯示了框中的哪些部分可以取值為auto，而哪些部分不能。

圖7-5：可以設置為auto的水平屬性

width必須設置為auto或某種類型的非負值。如果在水平格式化中確實使用了auto，會得到不同的效果。

注意：CSS網站制作中允許瀏覽器為width設置一個最小值，塊級元素的width不能小于這個值，對于不同瀏覽器，這個最小值可能不同，因為在規(guī)范中對此沒有定義。