CSS 行高 line-height 解析

之前設置 div 中的文本垂直居中的時候，習慣性的使用 height 和 line-height 等於相等的值的方式實現垂直居中效果，但是沒有深刻理解過 line-height 這個屬性的具體含義，今天抽空查閱了相關文檔，也算是比較清晰瞭解了 line-height 這個屬性以及當他與 height 值相等時使得文字能垂直居中的原理，簡單記錄一下。

首先抄一下 mdn 上關於 line-height 的相關介紹：line-height 屬性用於設置多行元素的空間量，如多行文本的間距。對於塊級元素，它指定元素行盒（line boxes）的最小高度。對於非 [替代] 的 inline 元素，它用於計算行盒（line box）的高度。這句話看起來很繞，我也沒理解透徹，試驗了幾番感覺 line-height 並沒有指定塊級元素的最小高度，而是在塊級元素沒有設置 height 的情況下，會取 line-height 設置的高度作爲默認高度，行級元素的話就直接由 line-height 指定其高度。

還有行高比較通俗易懂的解釋是：行高是指文本行基線間的垂直距離。基線（base line）並不是漢字文字的下端沿，而是英文字母 “x” 的下端沿。下面放一張盜來的圖具體解釋一下相關概念。

頂線：文字頂部對齊的線

中線：文字中部的畫線

基線：英文字母下端沿線

底線：文字底部對齊的線

文字高度：即我們熟悉的 font-size 值，就是頂線到底線的距離

當存在多行文本時，可以看到：

行距：相鄰兩行之間，上行底線距下行頂線的距離

半行距：顧名思義，行距的一半，單獨提出來有重要作用

接下來講一下本文的重點：height、line-height 與 font-size 之間的關係。由圖可知，line-height 的值等於中線到底線的距離 + 行距 + 頂線到中線的距離，即 行距 + font-size。然後觀察圖中多行文本的上面或者下面一行 (推薦下面一行) 當做單行文本來看，一行的高度 = 半行距 + font-size + 半行距，即 行距 + font-size，即 line-height 值。當 line-height 值變大時，也就是圖中一行的高度變大，其中 font-size 的值是不會變化的，所以 line-height 值的變化影響的是行距或半行距值的變化。當 div 的 height 等於 line-height 時，就相當於把圖中一行整體佔滿 div 高度放入 div 中，此時文字自然垂直居中。設想此時增大 line-height 的值，div 最高處與行頂部對齊，增大 line-height 的值導致半行距增大，即文字距離頂部的距離增大，div 的高度此時不變，文字就會偏離中心位置向下位移，反之減小 div 的值，文字就會向上偏移。

綜上所述：line-height = 半行距 + font-size + 半行距 ，如果 font-size 不改變大小，那麼 line-height 的值同半行距將保持線性關係，直觀表現就是 line-height 的值的改變會改變文本頂線到 border-top 之間的距離。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/KVg5X9uKaosEbPBNzKFpfA