前言

昨天講了box model的結構，即使配合圖片也還是一知半解，於是我蒐集一些針對Margin、Border、Padding說明，在概念上、類比實物上去理解。

再來就是探討CSS如何界定元素實際大小。

如果這樣想...

若是難以理解結構定義，
有人這樣舉例，假設兩個html像是兩個手提箱上下靠在一起，當想要兩個手提箱分開，用使用margin屬性去分開。
當想要行李箱裡面的衣服(內容)從角落移到箱子中間，就用padding屬性，讓衣服周圍添加（填充）其他物品，隔開衣服跟行李箱邊界。

實際佔據的空間界定之探討box-sizing

(圖片取自維基 - CSS box model)

實際寬度（Total Width） = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

實際高度（Total Height） = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

以上是W3C所規範的實際大小計算，
在瀏覽器歷史中，box model有兩種，一種是 content-box，另一種是 border-box。
兩者差異在如何界定寬度大小。
而這兩種都會在box-sizing屬性設定使用。

* {
    box-sizing: content-box;
}

* {
    box-sizing: border-box;
}

(圖片取自維基 - CSS box model)

content-box

W3C在CSS1規範裡，
width 和 height 只應用於元素的內容區域（content）。如果元素有border或padding，這些會額外加進元素的總寬度和總高度上，從而得出畫面上呈現的盒子大小。

自CSS3之後正式稱之為content-box，目前作為box-sizing預設值使用。

border-box

Internet Explorer規範的box model，
計算方式是瀏覽器將border和padding計算在元素的寬度和高度內。
意思是當設定元素寬度是100px，代表100px裡包含了content的width還有border和padding的width。

參考資料

維基
Mdn
w3schools - CSS Tutorial
youtube - Tech Wizzdom-CSS, margin vs padding difference explained