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 (邊界)

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: 1px solid #f2f2f2;
}

Padding、Margin、Border 比較

如何設定 Padding 和 Margin？

如果你是透過 WordPress 架設網站，調整 Padding 和 Margin 的方法主要可以分為「區塊編輯器」及 「Elementor」兩種。

• 區塊編輯器
• Elementor

你可以在區塊設定的 [樣式] 中找到尺寸，點選後可以設定 Padding 及 Margin。

Elementor 區段、欄位、元素皆能設定 Padding 及 Margin，設定位置都在 [進階] 中。