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

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

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

CSS Box Model 是什麼？

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;
}