Day 11 用 WordPress 看 CSS 樣式：「這裡空間大一點」

第 12 屆 iThome 鐵人賽

DAY 11

自我挑戰組

WordPress 客製化從 0 開始系列第 11 篇

12th鐵人賽 css wordpress padding margin

Eric 桓桓

2020-09-12 23:55:49

1747 瀏覽

分享至

大家好，我是 Eric。

昨天我們介紹完 CSS 中與字型有關的樣式，在了解這些樣式屬性後，其實我們已經看得懂超過一半以上的 Twenty Twenty 佈景主題樣式。
今天，我們再來補上剩下的一部份：空間。

邊界 (margin) 與邊框間距 (padding)

基本語法：

選擇器 {
    margin: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

記得我們在前一章曾經提到 box-sizing 這項屬性值嗎？事實上，在 HTML 的世界中，每項元素都是以方塊的形式呈現在頁面中。當我們掌握了方塊的基本概念後，我們就能更容易理解 margin 與 padding。用一句話來概括：

margin 代表框線以外的邊界，padding 則是框線到子層級內容的間距。

在定義 margin 與 padding 時，除了用單一屬性值同時指定四邊的邊界與框線間距外，也可以透過下列方式個別指定：

/** 四邊全指定，順序為上、右、下、左 */
margin: 10px 20px 10px 20px;
padding: 10px 20px 10px 20px;

/** 透過重複的方式，來指定四邊，順序為縱向、橫向 */
margin: 10px 20px; //與上面的樣式相同
padding: 10px 20px; //與上面的樣式相同

除了指定固定數值外，margin 也接受 auto 的屬性值。使用 auto 這個屬性值，會計算該方向邊界的最大值。白話來說，margin-left: auto; 會將元素置右對齊；反之，margin-right: auto 則可以有讓元素置左對齊的效果。以我們公司網站的樣式為例：

.content-wrap {
    width: 75%;
    margin: 0 auto;
}

代表具有 content-wrap 這個類型 (class) 的元素，其寬度會是視窗的 75% 寬，而元素會置中對齊於上層元素 (預設是整個視窗)。

我們從 Twenty Twenty 的 style.css 中，看到這種樣式廣泛地使用在各種元素中，例如 style.css 的第 57 行。這一行定義整份 HTML 文件與 <body> 的邊界與框線間距，避免部分瀏覽器會預設將 <body> 增加無法預期的間隔：

/* style.css Line 57 */
html,
body {
	border: none;
	margin: 0;
	padding: 0;
}

當我們在將設計師的平面稿，轉換成當代網站設計的 HTML 格式時，我們必須要同時考慮 padding 與 margin 兩種間隔。而這些間隔的細部調校，左右了網站是否有設計感。因此不管是前端工程師，或是設計師，都應該要對這兩種間距有所了解。

其他製作空間做法：position

除了透過設定邊界與框線間距來製作網站元素的間隔以外，還有一種方式，可以製造兩個元素之間的空間，那就是透過 position 這種定位方式。

屬性樣式 | 屬性值 | 說明
-------+-------+-------
position | relative/absolute/fixed | 定位方式，relative 代表相對位置，與其他同層級元素會互相推擠；absolute 代表絕對位置，會根據上層元素的位置定位；fixed 則會使元素固定於視窗的特定位置上。
top | px/em/rem/% | 元素頂部與上層元素的距離。
left | px/em/rem/% | 元素左側與上層元素的距離。
right | px/em/rem/% | 元素右側與上層元素的距離。
bottom | px/em/rem/% | 元素底部與上層元素的距離。
z-index | {整數} | 如果同時有多個元素使用 absolute 或是 fixed 時，可以決定元素排序的方式。

關於 position 的實作，我們可以參考 style.css 的第 1395 行：

/* style.css Line 1395 */
.overlay-header #site-header {
	background: transparent;
	margin: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 2;
}

.admin-bar.overlay-header #site-header {
	top: 32px;
}

這裡的樣式確保在開啟 overlay-header 的情況下，頁首 (#site-header) 的位置仍維持在頂端。而由於使用者登入後，如果啟用工具列，工具列的高度是 32px 高，因此在 admin-bar 這個類型的頁面底下，#site-header 就會被指定 top: 32px;，才能確保樣式符合預期。

（仔細想想，其實 position 更適合在版面配置的章節介紹。）