【HTML、CSS教學】3. Box Model
Published in
2 min readDec 2, 2019
🚩 Box Model
本章所介紹的區塊模型會運用到的設定有三個,分別是margin、padding、border,接下來會分別介紹如何運用。
- margin是用在不同區塊元素之間的距離。
- padding是區塊元素與內部的距離。
- 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;
在CodePen範例中,CSS最上面的註解已經有寫好除了CSS Reset以外其他常用的寫法(如box-sizing)。