Padding 與 Margin 的區別是什麼？先從 Box Model 開始說起

在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。

因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。

CSS Box Model 是什麼？

在開始說明 Padding 與 Margin 之間的差異前，你需要先了解什麼是 Box Model。Box Model 的中文名稱是「盒子模型」，當中包含 4 種組成元素，由內而外依序是：

1. Content (內容)
2. Padding (邊框間距)
3. Border (框線)
4. Margin (邊界)

每一種元素都會影響 CSS Box Model 的大小。

Padding 是什麼？

Padding 的中文名稱是「邊框間距」，位於內容及框線之間，可以控制兩者之間的距離。Padding 的屬性有以下 4 種：

1. padding-top：與上方框線的距離
2. padding-right：與右方框線的距離
3. padding-bottom：與下方框線的距離
4. padding-left：與左方框線的距離

語法範例

.box {
  padding-top: 25px;
  padding-right: 50px;
  padding-bottom: 75px;
  padding-left: 100px;
}

簡化版本

/*上右下左*/
.box {
  padding: 25px 50px 75px 100px;
}

/*上、左右、下*/
.box {
  padding: 25px 50px 75px;
}

/*上下、左右*/
.box {
  padding: 25px 50px;
}

/*上右下左都相同*/
.box {
  padding: 25px;
}

Margin 是什麼？

Margin 的中文名稱是「邊界」，位於框線之外，可以控制不同 HTML 元素間的距離。Margin 的屬性有以下 4 種：

1. margin-top：與上方元素的距離
2. margin-right：與右方元素的距離
3. margin-bottom：與下方元素的距離
4. margin-left：與左方元素的距離

語法範例

.box {
  margin-top: 25px;
  margin-right: 50px;
  margin-bottom: 75px;
  margin-left: 100px;
}

簡化版本

/*上右下左*/
.box {
  margin: 25px 50px 75px 100px;
}

/*上、左右、下*/
.box {
  margin: 25px 50px 75px;
}

/*上下、左右*/
.box {
  margin: 25px 50px;
}

/*上右下左都相同*/
.box {
  margin: 25px;
}

Border 是什麼？

Border 的中文名稱是「框線」，位於邊框間距及邊界之間。你可以設定框線的粗細、樣式及色彩。

語法範例

.box {
  border-width: 1px;
  border-style: solid;
  border-color: #f2f2f2;
}

簡化版本

.box {
  border: 1px solid #f2f2f2;
}