CSS 排版有一個很重要的觀念: Box Model 。它描述了元素之間的彼鄰關係,同時也左右了我們是否能夠成功透過 CSS ,完成整個頁面的呈現。

Box Model 的意思是說,每一個元素我們都可視它為一個 Box 。一個 Box 由以下屬性組成: marginpaddingbordercontent

註: content 非真的可用的 CSS 屬性,這裡只是為了方便說明。

而一個 Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成,如下圖 (取自 MSDN):

IE Box Model

所以一般我們指定的 widthheight 是 content 的寬和高,而沒有包含 borderpadding 。換句話說,一個元素真正佔用的視覺空間,應該是 content + padding + border ,這是標準的 CSS 規範。

不過在 IE5/5.5 時代,一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作,造成現今許多 CSS 排版上的困擾,但是也不是沒不是沒有辦法解決。 Box Model Hack 提供了解決之道,重點在於利用 IE5/5.5 對 CSS 解讀上的 Bug ,讓我們所希望之元素正確的寬高能正確地在 IE5/5.5 顯示出來。

對於 absolutefixed 而言,錯誤的 Box Model 或許影響較小 (不過也絕對不是沒有影響,像是如果要正確控制圖層的寬度時);但對 relativestatic 來說,因為它們都還是會保留其所佔有的空間。因此如何正確地調整 content 的大小,就會影響到我們的排版。

以下我們來看看 Box Model 的各個組成分子。

請特別注意:我在以下圖示中,元素上色的部份,除了有特別說明外,都是包含 border + padding + content ,這點非常重要!因為除了 body 標籤外,元素的 background 屬性的作用都不會包含 margin

border

border 是一個「加上去」的屬性,換句話說,一般都是用來區隔元素與元素用的。 border 的外圍即為元素的最外圍,因此計算元素實際的寬高時,就一定要將 border 納入。換句話說, border 會佔有空間,所以在計算精細的版面時,一定要將 border 的影響考慮進去。

如下圖,黑色虛線部份即為 border

border

還有一點要特別注意,如果我們在元素上設定背景色時, IE 是作用在 padding + content ,而 Firefox 則是作用在 border + padding + content 上。

padding

padding 會在元素內容的周圍加上我們所指定大小的空間;而如果我們沒有指定元素的寬高時,那麼該元素的內容就會受到 padding 所擠壓。如下圖:

padding

如果元素的內容中有行內顯示元素時,我們可以利用 padding 的設定來讓它們在我們想要的地方折行,而不用對 content 指定寬度;這樣的技巧我用在全版面的兩欄式版面上,使得我不用對難用的 width 屬性傷腦筋。

其實 padding 就這麼簡單,不過可別小看它,在 CSS 排版裡, padding 加上 margin 的設定,就能夠使版面千變萬化。

margin

margin 的意義就是該元素與其他元素間的邊界距離,它的應用大概也算是 CSS 排版很重要的技術之一。所以我打算多花一點時間解釋它。

我們可以分以下兩種狀況解釋:「元素與相鄰元素的距離」及「元素與父元素間的距離」。

「元素與相鄰元素的距離」指得是元素間是緊鄰的 (不論是區塊顯示元素或行內顯示元素) ,而沒有階層關係。例如:

<span id="i1">行內顯示元素1</span><span id="i2">行內顯示元素2</span>

這兩個 span 標籤就是緊鄰關係。而 span 標籤預設屬於行內顯示元素 (display: inline) ,因此它們的邊界距離就是 i1margin-right 加上 i2margin-left ,如下圖。

行內 margin

另一種緊鄰關係是區塊顯示元素,例如:

<div id="b1">區塊顯示元素1</div><div id="b2">區塊顯示元素2</div>

div 標籤預設屬於區塊顯示元素,也就是在它的前後會加入換行的控制。要注意的是,區塊顯示元素它們的邊界距離是重疊的!而當 b1margin-bottom 大於 b2margin-top 時, b1b2 實際的距離就以 b1margin-bottom 為準,如下圖。

區塊 margin

還有一種緊鄰關係是浮動元素,基本上它會是個區塊顯示元素,但 margin 的呈現關係和行內顯示元素是很像的,這我會在介紹浮動元素時再加以說明。

「元素與父元素間的距離」就是指元素之間有階層關係時的邊界距離。例如:

<div id="b3">
<div id="b4">內部區塊</div>
</div>

其中 b3 就是父元素, b4 則是子元素。 它們的邊界關係如下圖:

父子元素 margin

我們可以看到,子元素的邊界起始會以父元素的 Content 區為基準。

上面我們都是將 margin 設為正值,例如將元素的 margin-top 設為 20px ,那麼元素上面就會多出 20px 的空間。注意,我是說多出空間,而非向下移動!有什麼差別呢?

向下移動的定義是我們讓元素成為區塊顯示 (display: block) 或是它原本就是區塊顯示元素,然後指定它的 position 屬性為 relative ,最後設定它的 top 屬性為正值。

而多出空間則不論它的 position 屬性設定為何,硬是擠進我們指定的空間。而且設定 margin 之後,頁面內容超過螢幕顯示範圍,即時有捲軸也無法呈現完整的內容。

不過 IE6 和 FireFox 兩者對 Box Model 在 margin 的實作又有點不太一樣。 IE6 就算指定了父元素的 height 屬性,如果子元素的高度超過父元素的 height ,父元素就會被撐大,然後保留子元素 margin-bottom 的空間;而 FireFox 就不會。哪個實作是對的,我也不太清楚。

margin 也可以指定為負值,例如我在這篇「如何正確實作出固定寬度且置中的版型?」裡,運用到了將 margin-left 設定為負值的技巧。這裡我再加以說明,將 margin 設定為負值是怎麼一回事。

在「元素與元素間緊鄰」時,我們將 margin 設定為負值,會使得 margin 設定為負值的元素「疊」到另一個元素上 (不過還是要視另一個元素所設定的邊界距離而定) 。例如,我們將 A 區塊的 margin-bottom 設為 0 , B 區塊的 margin-top 設為 -10px ,那麼 B 區塊的文字就會疊到 A 區塊的文字上。

「元素間有階層性關係」時的關係,如果子元素的所指定的 margin 負值的絕對值大於父元素的 border + padding 時,就會使得子元素跑到父元素的外部去了。如圖,我們指定藍色元素的 margin-left-100px ,那麼該元素就會往左跑 100px ;這時如果其父元素 (淺黃色) 的 border-leftpadding-left 相加小於 100px ,我們就會看到該元素就會突出於父元素的左邊。

negative margin

總而言之,將 margin 指定為負值在 CSS 排版上有非常大的用處,如果能將它了然於胸,相信你在 CSS 排版的功力一定會大增的。

這篇我僅描述了 CSS Box Model 的一些基本觀念,雖然不是非常深入,但希望能夠讓大家對它們有基本的認知。而 CSS 排版除了 Position 和 Box Model 外,還有一樣非常值得探討的技術,就是浮動 (float) ;我將會在下次的文章中談到它。