在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。
因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
CSS Box Model 是什麼？
在開始說明 Padding 與 Margin 之間的差異前，你需要先了解什麼是 Box Model。Box Model 的中文名稱是「盒子模型」，當中包含 4 種組成元素，由內而外依序是：- Content (內容)
- Padding (邊框間距)
- Border (框線)
- Margin (邊界)
每一種元素都會影響 CSS Box Model 的大小。
Padding 是什麼？
Padding 的中文名稱是「邊框間距」，位於內容及框線之間，可以控制兩者之間的距離。Padding 的屬性有以下 4 種：
- padding-top：與上方框線的距離
- padding-right：與右方框線的距離
- padding-bottom：與下方框線的距離
- 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 種：
- margin-top：與上方元素的距離
- margin-right：與右方元素的距離
- margin-bottom：與下方元素的距離
- 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;
}
