驅動數位行銷
協助中小企業提升網站在搜尋結果頁上的能見度,以便獲取更多流量進而增加成交機率。
為什麼要加入本社團?好處如下:
在學習 CSS 的過程中,Padding 與 Margin 是兩個經常出現的名詞,但對於初學者來說,可能會有些難以理解。
因此,本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後,便能設計出更具層次或易讀的網頁。
在開始說明 Padding 與 Margin 之間的差異前,你需要先了解什麼是 Box Model。Box Model 的中文名稱是「盒子模型」,當中包含 4 種組成元素,由內而外依序是:
每一種元素都會影響 CSS Box Model 的大小。
Padding 的中文名稱是「邊框間距」,位於內容及框線之間,可以控制兩者之間的距離。Padding 的屬性有以下 4 種:
.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 的中文名稱是「邊界」,位於框線之外,可以控制不同 HTML 元素間的距離。Margin 的屬性有以下 4 種:
.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 的中文名稱是「框線」,位於邊框間距及邊界之間。你可以設定框線的寬度、樣式及色彩。
.box {
border: 1px solid #f2f2f2;
}
更多框線的樣式可參考 W3Schools。
Padding | Margin | Border | |
---|---|---|---|
位置 | 位於 Content 及 Border 之間 | 位於 Border 之外 | 位於 Padding 及 Margin 之間 |
負數值 | ❌ | ✅ | ❌ |
保有內容的背景色彩 | ✅ | ❌ | 可以自行設定色彩 |
如果你是透過 WordPress 架設網站,調整 Padding 和 Margin 的方法主要可以分為「區塊編輯器」及 「Elementor」兩種。
你可以在區塊設定的 [樣式] 中找到尺寸,點選後可以設定 Padding 及 Margin。