生活大小事。分享文。試用文。生活便利貼。

CSS box model 盒子模型也稱為區塊模型，所謂的 box model 其實就是傳統的 HTML 區塊概念再進化，假設我們用了一個 DIV 區塊來放置內容，CSS 允許網頁設計師將 DIV 區塊看成一個盒子，透過控制內距的 padding、控制外距的 margin 以及控制元素邊框的 border 屬性來調整盒子的展現結果，我們會在範例中呈現各種不同的 CSS box model 盒子模型效果，這對網頁排板有相當的幫助。

這裡要先解釋 CSS box model 會用到的屬性

• padding：用來設計元素內容與元素本身邊框間的距離，詳細請參閱：CSS padding 內距屬性與用法範例。
• margin：用來設計元素與外部元素的距離，詳細請參閱：CSS margin 屬性與用法範例。
• border：用來設計元素邊框的顏色、粗細與樣式，詳細請參閱：CSS border 邊框。

CSS box model 盒子模型的示意圖

CSS box model 盒子模型實際範例

範例的呈現結果

我們在範例中準備了兩個不同的 DIV 區塊，分別透過 CSS 的 border、padding、width、margin、background-color 等屬性設計出 box model 效果，第一個區塊是橘色的 5px 粗邊框，邊框與內容間的內距（padding）是 10px，再透過外距 margin 屬性加大與第二個區塊間的垂直距離，如此一來就不會黏在一起，第二個 DIV 區塊的邊框就顯得比較細，只有 2px 的寬度，不過因為套用了虛線（dashed）效果，視覺表現也還不錯看，內距調整為 6px，所以文字與邊框間的距離變近了，再加上淺灰色的背景顏色，整體呈現出來的效果完全不一樣，這就是 CSS box model 的設計應用範例，請自行變化練習。