CSS 的 box 模式

CSS 中著名的基本設計觀念 Box model 算是剛開始學習 CSS 排版設計的基礎，其中有三個蠻重要的元素，包含了 margin（外距）、padding（內距）與 border（邊框）等，而每個元素都有分四個邊，分別是上、右、下、左，聽起來似乎有點複雜，不過只要抓住這幾個元素的用法，就可以很輕鬆的製作出所為的 Box model 框盒效果囉！

首先來分享一張用 CSS 做出來的圖片

這張圖片就是透過 CSS Box model 所製作出來的效果，共有兩個 <div> 區塊，大區塊設定 padding 來讓大小區塊間格 30px 個單位距離，小區塊僅設定長與寬即可呈現這樣的效果，而大區塊與其他的區塊間距離則需要靠 margin 來處理。

由範例中可以看到框線的線條有兩種，分別是虛線與實線，這是透過 css border-style 的邊框款式來設計的，稍微回顧一下，我們總共只用了 margin、padding 與 border 三種元素，就製作出這個 box model 模式，是不是很簡單呢？這幾個元素還可以變化出更多的成品唷！特別是排版的時候，更是少不了 padding 與 margin 這兩個元素。

就來簡單學習一下這三種元素的基礎吧！

學習參考

CSS margin 屬性與用法範例
CSS padding 內距屬性與用法範例
CSS border 邊框

相關連結

CSS Box model
World Wide Web Consortium (W3C)