玩轉 CSS 盒子模式

盒子模式(Box Model)是在 CSS 中一個很重要的觀念，
它是用來描述一個元素是如何組成的，
用一張圖來表達盒子模式的式樣：


主要元素由四個部份組成，
由內而外依序是，意思可解作：

1. content: 內容、主體、元件。
2. padding: 留白、填充、內距(內邊距)。
3. border: 邊框、邊線。
4. margin: 邊界、邊距(外邊距)。

我自己是習慣用 元件、內距、邊線、邊距 來稱呼 :-|

XHTML 由許多個 content 組合起來，
樣式則交給 margin, border, padding 來處理，
這裡說的樣式就是指 content 間的關係。
2 個 content 之間的距離可以由 margin, border, padding 來決定，
通常找不出距離的問題點在哪裡時，可以描繪出各元件的邊框線條來找出原因。
[css]border:1px solid #f00;[/css]

這邊將 CSS 直接寫在 XHTML 裡來說明盒子模式間距離的關係：

　
Code:
[xml highlight="2,5"]<div style="width:450px;border:1px solid #f00">
<div style="margin:30px;border:10px solid #0f0;padding:20px">
<div style="height:20px;background:#00f"></div>
</div>
<div style="margin:30px;border:10px solid #0f0;padding:20px">
<div style="height:20px;background:#00f"></div>
</div>
</div>[/xml]

圖示說明：


當你把這 3 個 Property(性質) 搞清楚了，
再加上 float(浮動元素) 與 clear(清除浮動元素)，
要成為 Layout(布局) 大師也不是問題了 :D