【HTML、CSS教學】3. Box Model

🚩 Box Model

本章所介紹的區塊模型會運用到的設定有三個，分別是margin、padding、border，接下來會分別介紹如何運用。

1. margin是用在不同區塊元素之間的距離。
2. padding是區塊元素與內部的距離。
3. border是在區塊元素外加一個線條。

如CodePen所顯示的，當box1、box2有margin時，除了會與wrap的灰色產生距離外，彼此間也會產生距離。

box2的padding是會讓內部元素向內縮，如box2文字與邊框產生5px的距離。而border是增加外邊界。

三個都可以增加後贅詞 -top、-right、-bottom、-left。如box3所顯示，僅有該方向會顯示對應的結果。

元素邊界的寫法：

元素邊界: 20px;，設定上右下左。
元素邊界: 0 20px;，前面的數字代表上下，後面的數字代表左右。
元素邊界: 2px 3px 4px 0;，依序代表上、右、下、左。

元素邊界的計算：

當給一個div長寬各300px、padding 50px、border 10px、 margin 50px時，會如下圖，最終的物件寬度會變成420px。

若要避免明明指定了寬度300px，最後實際寬度卻是多加了padding、border，可以使用CSS3的box-sizing，符合設定的寬高，寫法如下：

box-sizing: border-box;

圖片引用自六角學院課程「 使用 HTML、CSS 開發一個網站」

在CodePen範例中，CSS最上面的註解已經有寫好除了CSS Reset以外其他常用的寫法(如box-sizing)。