網頁就是一堆箱子組成的概念：CSS 盒模型

為什麼要學習盒模型？

如果你對於網頁有這麼多間距可以被調整所困惑，或是初入門 CSS 我都非常推薦要先理解 CSS 的盒模型概念，唯有了解盒模型如何運作才能學習更多網頁切版布局的技巧。

用很多的盒子來建構網頁

網頁元素就像很多盒子相互嵌套

舉一個簡單的例子來說，每個 HTML 元素就像是一個盒子，有開頭與結尾。每個 HTML 標籤 (或者可以說是 DOM 元素) 都具備與版面布局相關的屬性，詳細有以下幾種，將會以由內到外來說明：

<!--盒子外-->
<div>
  <!--盒子內-->
</div>
<!--盒子外-->

內容 Content

通常是一些文字內容、其他元素或寫死的寬高。舉例來說撰寫寬高各 100px就給該元素創造了內容空間。

div {
  width: 100px;
  height: 100px;
  background-color: #87b2bc;
}

內距 Padding

在內容之外是內距，藉由內距可以在不改變內容的狀態下設置內容外要多少留白。藉由註明清楚內容外要預留多少空間，可以幫助我們建立一個內容留白分割的模型，在撰寫尺寸浮動的網頁的時候也會輕鬆許多，不用在撰寫元素尺寸的時候還要連帶考量到留白尺寸。

div {
  width: 100px;
  height: 100px;
  padding: 100px;
  background-color: #87b2bc;
}

邊框 Border

為該元素添加邊框，要留意邊框也是計算在元素的尺寸之內的。

div {
  width: 100px;
  height: 100px;
  padding: 100px;
  background-color: #87b2bc;
  border: 100px solid #e3c381;
}

外距 Margin

向外推擠的留白，與內距非常類似，差別在於外距並不計算在該元素的尺寸之內，

div {
  width: 100px;
  height: 100px;
  padding: 100px;
  margin: 100px;
  background-color: #87b2bc;
  border: 100px solid #e3c381;
}

額外知識

現在你明白何謂 CSS 盒模型了！這裡有一些與其相關，額外留意的特性。

外距崩塌 Margin Collapse

在 HTML 中相鄰的元素將會導致外距崩塌，意思是指兩者的外距會相互抵銷，剩下最大的外距為主。

.top-div {
  margin: 30px;
  background-color: orange;
  height: 100px;
  width: 100px;
}

.bottom-div {
  margin: 40px;
  background-color: skyblue;
  height: 100px;
  width: 100px;
}

你會發現在以上的例子中兩個相鄰的元素之間只有 40px 的外距，這就是所謂的外距崩塌！此外要額外注意的是如果使用像是： flex、 grid……不是在普通的文件流向來布局的方式，此項特性將不會存在。

Box Sizing🔗 屬性

.div {
  box-sizing: border-box;
  box-sizing: content-box;
}

box-sizing是一種 CSS 屬性，用於改變盒模型的計算方式，具體來說有兩種選項：

• context-box- 內容的尺寸相等於寬高屬性。預設所有元素都會使用該方式來計算。
• border-box- 內容尺寸相等於寬高屬性與內距邊界的合。

結論

• 內容 Content - 元素的內容物
• 內距 Padding - 向內推擠的留白
• 外框 Border - 元素的邊框
• 外距 Margin - 向外推擠的留白

盒模型是 CSS 中數一數二重要的核心概念之一，藉由學習它將會對你布局、計算版面有極大的幫助。如果這篇文章過後還是需要後續回溫這段知識你可以打開瀏覽器的開發工具，都有很方便的視覺引導可供開發時參考。

參考資料

CSS Box Model - Web Dev Simplified Blog🔗