布语

該分享主題參考自張鑫旭編寫的《Css 世界》書籍第五章部分

字母 x 與基線#

在 Css 中基線的出現在一定程度上是為了解決字體排版問題，在 Css 中基線定義就和字母 x 有關，字母 x 的下邊緣線就是基線.

x-height
x-height 算是在 css 中的一種概念並不是作為屬性存在，x-height 通常來說是指小寫字母 x 高度，也可稱之中位線與基線之間的距離

在該圖中看到有一個 midian 線，該線和我們在使用vertical-align: middle;中的 middle 線是不一樣的，在規範中對於 middle 的大致為基線向上 1/2x-height的距離，近似與字母 x 的交叉點.
下面這張圖是我暫時理解的 middle 線的位置，該線是通過將 line-height: 0; 時所觀察到的。該線大概位置也可以通過 * text-decoration: line-through;* 觀察到，並且這兩條線的大致位置是同一個位置上

從 x 到 vertical-align#

vertical-align 該屬性常用於進行基線對齊，可是在一些情況下可能會遇到的問題就是為什麼該屬性沒有起作用，因為 vertical-align 進行對齊的基準是內聯級元素。內聯級元素的默認基線為 baseline, 該基線 baseline 就是採自於字母 x 的下邊緣線，在使用到中文時或者其他文字時可能會碰到一種情況就是感覺沒有對齊，那是因為中文和部分英文或者其他文字的下邊緣線比 baseline 低，造成的視覺效果就是文字下沉效果，如下圖所示

如果你想讓更加對齊一些的話你可以使用 * vertical-align: -3px;* 進行手動調整底部對齊，但是當你調整的時候你應該明確的是調整的基準是基於 baseline 進行上下調整的，而且這種調整是具有精確性並且各家瀏覽器對於該屬性的支持是不錯的

內聯元素的基石 line-height#

首先提出一個問題，那就是一個盒子究竟是靠什麼撐開的？我最先開始的答案基本上就是由內容 (font-size) 撐開盒子，但是隨著對參閱書籍的閱讀和自己上手實踐逐漸的對之前自己的答案產生了懷疑直到否定，我們從下面這個例子可以大致看一下.

為什麼會第一感覺到盒子由內容 font-size 撐開的呢？

這就需要考慮到 line-height 的默認值的計算方式了。排除掉 font-family 對字體的影響，正常來講 line-height 的默認值為 normal 即 1.2 左右，這個的值和需要根據瀏覽器進行具體衡量 (各瀏覽器可能有差異),

另一方面去探尋 1.2 就是代表著什麼？是怎麼基於什麼進行計算？是怎麼規範文字排版中行高的？
經過實驗，這個值是根據自身元素的 font-size 值進行計算的 (注意: font-size 是具有繼承性質的). 在規範文字排版中 line-height 規範需要看兩方面：一方面是文本單行的情況，另一方面是文本多行的情況.

• 文本單行
  • 就個人理解來講，單行情況 line-height 的主要體現在與對內容高度的支持
• 文本多行
  • 多行的情況 line-height 一方面體現每行文本的高度支持，另一方面就是在於每行元素距離下一行元素之間 baseline 的間距

這裡為什麼只是說了文本這種情況而沒有討論其他內聯級元素中 line-height 的體現呢？
這裡我們拿 img 元素作為一個例子進行分析，首先 img 元素默認情況下為一個內聯級元素，但是 img 還有一個特點就是它是一個可替換元素，至於什麼是可替換元素用一句話概括就是改變標籤屬性會影響到頁面展示，我們這裡就不展開討論可替換元素和非可替換元素之間的差異化了。對於內聯級可替換元素來講 line-height 是無法影響到展示的大小，這裡我準備了一個例子大家可以看一下

從該例子中我們可以看到確實line-height沒有影響到img的高度, 那麼隨之帶來的一個問題就是為什麼box盒子現在高度為256px呢? 這個問題帶來的一個概念就是幽靈空白節點的存在, 這個概念可能平時沒有聽過或者沒有確切感受過其存在, 同樣我準備了一個例子以證明幽靈空白節點的存在, 大家可以看一下 看完這個例子我們明顯發現span沒有內容但是為什麼有了容器高度, 這就是幽靈空白節點的存在所導致的, 幽靈空白節點存在於Html5規範的文檔中即頁面頭部標識了``````的文檔, 並且我們可以通過上面的這個例子發現幽靈空白節點的幾個特點: 1. 存在於內聯級元素上 2. 表現如同一個內聯級元素並且自身存在一個空白字符

為什麼默認值 normal 為 1.2 左右呢？
經測在 Chrome 中 line-height 的默認值 normal 代表這 1.27 左右 (可能有誤差), 我們可以看下圖 line-height: 1; 情況下文字排版展示情況.

也可以直接通過 codepen 在線前往查看兩者文字排版效果差別:

明確的發現在*line-height: 1;*情況下文字可能會出現上下行有重疊的情況(為什麼會有這種情況請結合middle示意圖和文本多行情況結合理解), 這樣的文字排版一方面不利於閱讀另一方面就是頁面排版會顯得擁擠不堪.

line-height 與 vertical-align#

line-height 和 vertical-align 兩者主要的一種關係就是當你使用到 * vertical-align: 10%;* 的情況的時候你應該明確這個百分比是基於什麼進行計算的，這個百分比就是基於 line-height 進行計算的，然後根據元素 baseline 對齊到父元素身上 baseline 給定的百分比.

應用#

圖片空隙的產生及如何修正
下面用實例以及一些解決方法來說明這件事情

為什麼圖片下邊緣會多出這幾個像素的距離? 該間隙的產生由三個因素所影響的幽靈空白節點、line-height和vertical-align. 在上面的示例中我使用到了字母x的原因之一是用於替代幽靈空白節點讓我們更加明顯的看出其原因, 當前字體為16px, 在Chrome中line-height: normal中normal解析值大約為1.27, 我們可以計算出行高為20.32px經過四捨五入後為20px, 因為字體x的下邊緣線至少距離容器邊框的距離至少為2px(至少的原因是這個間距和字體有關)(ps: 半行間距, 這是頁面排版中一個概念, 個人暫未涉獵), 我們可以通過手動移動vertical-align進行移動進行大致比對作為參考即可.

暫未涉獵 / 補充到的知識點#

1. 行距與半行距 => 有興趣請看《Css 世界》5.2.1 部分
2. 深入理解 vertical-align => 有興趣請看《Css 世界》5.3.4~5.3.8 部分