當(dāng)前內(nèi)容所在位置（可進(jìn)入專欄查看其他譯好的章節(jié)內(nèi)容）

• 第四部分 視覺增強(qiáng)技術(shù) ??
• 【第 12 章 CSS 排版與間距】 ??
  • 12.1 間距設(shè)置 ??
    • 12.1.1 使用 em 還是 px ??
    • 12.1.2 對(duì)行高的深入思考
    • 12.1.3 行內(nèi)元素的間距設(shè)置

《CSS in Depth》新版封面

譯者按
本篇又將開啟新一章的學(xué)習(xí)，全新修訂的第 12 章同樣將站在設(shè)計(jì)師的角度，重點(diǎn)關(guān)注頁面樣式的精修與微調(diào)。自學(xué)第一版時(shí)這些章節(jié)我都是能跳過便跳過，因?yàn)楣ぷ魃洗叩锰o了，很多知識(shí)點(diǎn)都是邊干邊查邊消化，事后也疏于復(fù)盤，結(jié)果現(xiàn)在還得老老實(shí)實(shí)回來補(bǔ)上這一課。很多事情就是這樣，省力在前往往意味著吃苦在后。有些人即便撞了南墻還不死心，估計(jì)是知道返工的活最磨人吧，于是拖著拖著就放棄掙扎了。相比之下，我還算比較幸運(yùn)的，沒有選擇躺平。希望你也是。

第 12 章 排版與間距 Typography and spacing

---

本章概要

• 元素間距的微調(diào)
• 用 Web 字體打造頁面獨(dú)特觀感
• 谷歌字體 API 的用法
• 字體間距的調(diào)整（字距、行距與行高）
• 影響 Web 字體性能的因素及優(yōu)化策略
• 可變字體（variable fonts）的用法

本章將繼續(xù)構(gòu)建上一章留下的示例頁。目前已經(jīng)定義好了顏色，頁面布局也大致準(zhǔn)備就緒了。剩下的工作還包括精修頁面元素間的間距，以及改用 Web 字體來增強(qiáng)頁面的視覺趣味性等。它們看似是兩個(gè)不相關(guān)的主題，但在某些關(guān)鍵問題上是存在相互作用的。CSS 中含有大量控制布局、間距及字號(hào)的屬性（properties），因此有必要將它們與某些通用的間距調(diào)整方案結(jié)合起來進(jìn)行考察。

排版是與印刷出版一樣歷史悠久，也因此成為本書中唯一一個(gè)有著數(shù)百年發(fā)展歷史的古老話題。本章不會(huì)過于詳盡地闡述這部分內(nèi)容，但會(huì)介紹一些要點(diǎn)，以及如何將其應(yīng)用到現(xiàn)代 Web 開發(fā)中。

12.1 間距 Spacing

如果上一章您一直緊跟我的節(jié)奏在本地同步練習(xí)的話，此刻應(yīng)該已經(jīng)實(shí)現(xiàn)了示例頁的顏色配置和大致的布局。示例頁的 HTML 標(biāo)記詳見 代碼清單 11.1（譯注：位于上一章的 11.1.2 小節(jié)）；而 CSS 代碼則是在后續(xù)講解中逐步完善的，此刻也應(yīng)該與本章中的示例代碼保持一致。如若不然，也可以從示例代碼倉庫中復(fù)制文件 listing-11.08.html（詳見 https://github.com/CSSInDepth/css-in-depth-2/blob/main/ch11/listing-11.08.html）。

下面重點(diǎn)關(guān)注設(shè)計(jì)稿中標(biāo)注的那些精確間距。根據(jù)設(shè)計(jì)師選用的不同工具，間距的微調(diào)往往是開發(fā)過程中一項(xiàng)較為枯燥的工作。雖然現(xiàn)代化的設(shè)計(jì)工具能有效緩解這個(gè)問題，但在后期審查頁面時(shí)，可能還會(huì)與設(shè)計(jì)師反復(fù)溝通調(diào)整，明確一些需要修改的地方，或者跟視覺稿不一致的實(shí)現(xiàn)。

這部分工作主要涉及元素外邊距的正確設(shè)置。人們往往是從最容易的地方著手，哪怕后續(xù)會(huì)面臨進(jìn)一步調(diào)整。這里要考慮的問題主要有兩個(gè)：一是相對(duì)單位的引入與否；二是考慮行高對(duì)垂直間距的實(shí)際影響。

12.1.1 使用 em 還是 px（Using ems vs. px）

考慮使用相對(duì)單位還是絕對(duì)單位，是非常重要的決定。因?yàn)樵O(shè)計(jì)師一般使用像素來標(biāo)注距離，因此使用絕對(duì)單位會(huì)相對(duì)容易。但啟用相對(duì)單位，無論是選 em 還是 rem，都可以帶來很多好處。

我們來看一下導(dǎo)航菜單里標(biāo)注的距離（如圖 12.1 所示）。設(shè)計(jì)稿要求每個(gè)導(dǎo)航菜單項(xiàng)之間必須留有 10px 的間距，同時(shí)其底邊與導(dǎo)航條的底邊之間的間距也為 10px。

【圖 12.1 每個(gè)導(dǎo)航菜單項(xiàng)之間及周圍都需要空出 10px】

在第二章中，我們了解了使用相對(duì)單位的各種好處，因此有必要想清楚對(duì)哪些尺寸適合相對(duì)單位，而哪些適合用像素。是考慮快刀斬亂麻，將所有尺寸都轉(zhuǎn)為 em 或者 rem？還是因地制宜，根據(jù)頁面每個(gè)設(shè)計(jì)元素的具體情況來決定？如果考慮間距會(huì)隨著用戶設(shè)置的不同字號(hào)做同步縮放，那么就應(yīng)該選用相對(duì)單位 em 或 rem；否則使用像素單位 px 就完全足夠了?；谶@樣的考慮，在實(shí)際開發(fā)中，我通常更傾向于對(duì)一些偏小的尺寸應(yīng)用相對(duì)單位（em），特別是那些環(huán)繞在文字或按鈕周圍的尺寸；而稍大一些的容器間隔或內(nèi)部間距受響應(yīng)式設(shè)計(jì)的影響沒那么敏感，因此保留像素單位 px 即可。

在我?guī)私馐纠撝械拈g距設(shè)置時(shí)，我會(huì)指出選擇某種方式的理由；但請(qǐng)注意，這些意見或觀點(diǎn)難免會(huì)帶有主觀色彩，給出的解決方案也可能并非唯一正確的答案。

按照設(shè)計(jì)規(guī)范，導(dǎo)航欄中的間距尺寸需要在菜單項(xiàng)四周留出 10px 的距離（如圖 12.1 所示）。由于它們算小尺寸元素，且文字周圍還得留些內(nèi)邊距，因此考慮使用相對(duì)單位 em 來設(shè)置它們的間距。

鑒于基準(zhǔn)字號(hào)為 16px，可以通過目標(biāo)尺寸除以基準(zhǔn)字號(hào)來算出 em 的值，即 10 / 16 = 0.625。因此該間距為 0.625em；再將其放入樣式表中，相關(guān)樣式代碼如下列代碼清單 12.1 所示。需要變更的地方都標(biāo)有注釋。

譯注

為方便對(duì)照，這里直接給出示例頁的相關(guān) HTML 標(biāo)記：

<nav class="nav-container"><div class="nav-container__inner"><a class="home-link" href="/">Ink</a><ul class="top-nav"><li><a href="/features">Features</a></li><li><a href="/pricing">Pricing</a></li><li><a href="/support">Support</a></li><li class="top-nav__featured"><a href="/login">Login</a></li></ul></div>
</nav>

代碼清單 12.1 使用內(nèi)邊距和外邊距來設(shè)置導(dǎo)航菜單的間距

.nav-container {background-color: var(--medium-green);
}
.nav-container__inner {display: flex;justify-content: space-between;max-inline-size: 1080px;margin-inline: auto;padding: 0.625em 0; /* 給整個(gè)導(dǎo)航欄設(shè)置 10px 的上下內(nèi)邊距 */
}/* ... */.top-nav {display: flex;list-style-type: none;margin: unset; /* 移除瀏覽器默認(rèn)的列表元素外邊距樣式 */gap: 0.625em; /* 各導(dǎo)航菜單項(xiàng)間添加 10px 的水平外邊距*/
}

處理間距時(shí)，需要知道什么時(shí)候該用內(nèi)邊距，什么時(shí)候該用外邊距。在本例中，容器 nav-container__inner 應(yīng)該使用內(nèi)邊距來設(shè)置垂直間隔，以便對(duì)整個(gè)容器生效，讓其中靠左顯示的頁面標(biāo)題（即 a.home-link 元素）和 top-nav 列表自帶上下間距；而導(dǎo)航菜單項(xiàng)之間的水平間距則用到了 Flexbox 布局中的間隙（gap），因?yàn)槲抑幌Ｍg距出現(xiàn)在各子項(xiàng)之間。此外，也可以通過設(shè)置外邊距來達(dá)到相同效果 ¹。

再來看看巨幅主圖的底邊和三個(gè)內(nèi)容欄之間的垂直間隔。如圖 12.2 所示，設(shè)計(jì)稿展示了這些間距的測(cè)量結(jié)果。可以看到，無論對(duì)于帶背景圖片的主圖元素還是設(shè)置了背景色的三個(gè)內(nèi)容欄元素，標(biāo)出的間隔都僅對(duì)元素外圍生效，因此需要使用外邊距來處理這兩個(gè)間隔。

【圖 12.2 主圖下方（40px）及內(nèi)容欄（25px）之間的頁面外邊距效果】

在本例中，我認(rèn)為這些間隔無需隨字號(hào)大小而同步縮放，因此就保留了像素單位 px。具體設(shè)置詳見代碼清單 12.2。上一章其實(shí)已經(jīng)設(shè)置了主圖下方的外邊距 40px，這里再寫一遍以強(qiáng)調(diào)其用意。將下列示例代碼中 tile-row 元素的間隙設(shè)置（即 gap 聲明）也添加到本地樣式表：

代碼清單 12.2 為主圖下方及內(nèi)容欄之間設(shè)置外邊距

.hero {background: url(collaboration.jpg) no-repeat;background-size: cover;margin-block-end: 40px; /* 確保主圖下方有 40px 的間距 */
}/* ... */.tile-row {display: flex;gap: 25px; /* 各分欄之間保持 25px 的間距*/
}
.tile-row > * {flex: 1;
}

像這種容器（帶有背景圖片或者背景顏色的），它們之間的間隔設(shè)置往往很簡(jiǎn)單。如果需要調(diào)整文本行之間的間距，例如段落或者標(biāo)題中的文本，可能會(huì)略顯麻煩（a little more finicky）。

---

---

---

關(guān)于《CSS in Depth》（中譯本書名《深入解析 CSS》）

	第 1 版	第 2 版
讀者評(píng)分	原版：4.7（亞馬遜）；中文版：9.3（豆瓣）	原版：5.0（亞馬遜）；中文版：暫無，待出版
出版時(shí)間	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暫無，待出版
原價(jià)	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暫無，待出版
現(xiàn)價(jià)	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暫無，待出版
原版國(guó)內(nèi)預(yù)訂	起步價(jià) ￥461.00	起步價(jià) ￥750.00

本專欄為該書第 2 版高分譯文專欄，全網(wǎng)首發(fā)，精譯精校，持續(xù)更新，計(jì)劃今年內(nèi)完成全書翻譯，敬請(qǐng)期待！！！

目前已完結(jié)的章節(jié)（可進(jìn)入本專欄查看詳情，連載期間完全免費(fèi)）：

• 第一章 層疊、優(yōu)先級(jí)與繼承（已完結(jié)）
  • 1.1 層疊
  • 1.2 繼承
  • 1.3 特殊值
  • 1.4 簡(jiǎn)寫屬性
  • 1.5 CSS 漸進(jìn)式增強(qiáng)技術(shù)
  • 1.6 本章小結(jié)
• 第二章 相對(duì)單位（已完結(jié)）
  • 2.1 相對(duì)單位的威力
  • 2.2 em 與 rem
  • 2.3 告別像素思維
  • 2.4 視口的相對(duì)單位
  • 2.5 無單位的數(shù)值與行高
  • 2.6 自定義屬性
  • 2.7 本章小結(jié)
• 第三章 文檔流與盒模型（已完結(jié)）
  • 3.1 常規(guī)文檔流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 負(fù)的外邊距
  • 3.5 外邊距折疊
  • 3.6 容器內(nèi)的元素間距問題
  • 3.7 本章小結(jié)
• 第四章 Flexbox 布局（已完結(jié)）
  • 4.1 Flexbox 布局原理
  • 4.2 彈性子元素的大小
  • 4.3 彈性布局的方向
  • 4.4 對(duì)齊、間距等細(xì)節(jié)處
  • 4.5 本章小結(jié)
• 第五章 網(wǎng)格布局（已完結(jié)）
  • 5.1 構(gòu)建基礎(chǔ)網(wǎng)格
  • 5.2 網(wǎng)格結(jié)構(gòu)剖析 （上）
    • 5.2.1 網(wǎng)格線的編號(hào)（下）
    • 5.2.2 網(wǎng)格與 Flexbox 配合（下）
  • 5.3 兩種替代語法
    • 5.3.1 命名網(wǎng)格線
    • 5.3.2 命名網(wǎng)格區(qū)域
  • 5.4 顯式網(wǎng)格與隱式網(wǎng)格（上）
    • 5.4.1 添加變化 （中）
    • 5.4.2 讓網(wǎng)格元素填滿網(wǎng)格軌道（下）
  • 5.5 子網(wǎng)格（全新增補(bǔ)內(nèi)容）
  • 5.6 對(duì)齊相關(guān)的屬性
  • 5.7 本章小結(jié)
• 第六章 定位與堆疊上下文（已完結(jié)）
  • 6.1 固定定位
    • 6.1.1 創(chuàng)建一個(gè)固定定位的模態(tài)對(duì)話框
    • 6.1.2 在模態(tài)對(duì)話框打開時(shí)防止屏幕滾動(dòng)
    • 6.1.3 控制定位元素的大小
  • 6.2 絕對(duì)定位
    • 6.2.1 關(guān)閉按鈕的絕對(duì)定位
    • 6.2.2 偽元素的定位問題
  • 6.3 相對(duì)定位
    • 6.3.1 創(chuàng)建下拉菜單（上）
    • 6.3.2 創(chuàng)建 CSS 三角形（下）
  • 6.4 堆疊上下文與 z-index
    • 6.4.1 理解渲染過程與堆疊順序（上）
    • 6.4.2 用 z-index 控制堆疊順序（上）
    • 6.4.3 深入理解堆疊上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小結(jié)
• 第七章 響應(yīng)式設(shè)計(jì)（已完結(jié)）
  • 7.1 移動(dòng)端優(yōu)先設(shè)計(jì)原則（上篇）
    • 7.1.1 創(chuàng)建移動(dòng)端菜單（下篇）
    • 7.1.2 給視口添加 meta 標(biāo)簽（下篇）
  • 7.2 媒體查詢（上篇）
    • 7.2.1 深入理解媒體查詢的類型（上篇）
    • 7.2.2 頁面斷點(diǎn)的添加（中篇）
    • 7.2.3 響應(yīng)式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 響應(yīng)式圖片
  • 7.5 本章小結(jié)
• 第八章 層疊圖層及其嵌套
  • 8.1 用 layer 圖層來操控層疊規(guī)則（上篇）
    • 8.1.1 圖層的定義（上篇）
    • 8.1.2 圖層的順序與優(yōu)先級(jí)（下篇）
    • 8.1.3 revert-layer 關(guān)鍵字（下篇）
  • 8.2 層疊圖層的推薦組織方案
  • 8.3 偽類 :is() 和 :where() 的用法
  • 8.4 CSS 嵌套的使用
    • 8.4.1 嵌套選擇器的使用
    • 8.4.2 深入理解嵌套選擇器
    • 8.4.3 媒體查詢及其他 @規(guī)則 的嵌套
  • 8.5 本章小結(jié)
• 第九章 CSS 的模塊化與作用域
  • 9.1 模塊的定義
    • 9.1.1 模塊和全局樣式
    • 9.1.2 一個(gè)簡(jiǎn)單的 CSS 模塊
    • 9.1.3 模塊的變體
    • 9.1.4 多元素模塊
  • 9.2 將模塊組合為更大的結(jié)構(gòu)
    • 9.2.1 模塊中多個(gè)職責(zé)的拆分
    • 9.2.2 模塊的命名
  • 9.3 CSS 的作用域
    • 9.3.1 CSS 作用域的就近原則
    • 9.3.2 劃定作用域的邊界
    • 9.3.3 CSS 中的隱式作用域
    • 9.3.4 關(guān)于 CSS 作用域與層疊圖層
  • 9.4 CSS 模式庫
  • 9.5 本章小結(jié)
• 第十章 CSS 容器查詢
  • 10.1 容器查詢的一個(gè)簡(jiǎn)單示例
    • 10.1.1 容器尺寸查詢的用法
  • 10.2 深入理解容器
    • 10.2.1 容器的類型
    • 10.2.2 容器的名稱
    • 10.2.3 容器與模塊化 CSS
  • 10.3 與容器相關(guān)的單位
  • 10.4 容器樣式查詢的用法
    • 10.4.1 將模塊與所在容器解耦
    • 10.4.2 減少重復(fù)代碼
  • 10.5 本章小結(jié)
• 第 11 章 顏色與對(duì)比
  • 11.1 通過對(duì)比進(jìn)行交流
    • 11.1.1 模式的建立
    • 11.1.2 還原設(shè)計(jì)稿
  • 11.2 顏色的定義
    • 11.2.1 色域與色彩空間
    • 11.2.2 CSS 顏色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
  • 11.3 利用 OKLCH 處理顏色（上篇）
    • 11.3.4 從頁面其他顏色衍生出新顏色（下篇）
  • 11.4 思考字體顏色的對(duì)比效果
  • 11.5 本章小結(jié)
• 附錄
  • 附錄A：CSS 選擇器參考
  • 附錄B：CSS 預(yù)處理器簡(jiǎn)介

---

1. 譯注：若采用外邊距實(shí)現(xiàn)起來會(huì)比較繁瑣。上一版就是用的左外邊距，需要和貓頭鷹選擇器搭配使用，寫作：.top-nav > li + li { margin-left: 0.625em; }。 ??