css中行高到底指的是什么了?
line-height稱之為行高,顧名思義是指行的高度,目前的主流說法是指兩行文本之間基線之間的垂直距離,line-height實際距離指兩個半行間距(上一行文本底線與下一行文本的頂線之間垂直距離的二分之一)加上字體本身高度。
也有人并不贊同上述說法(他認為行高并非指的是兩行文本之間基線的距離),對于行高 的解釋有自己的一套解釋方法,
-
可以看看這位作者是怎么認為的
該作者認為line-height即是兩個leading(line-height與font-height的高度差的二分之一)加上字體高度(他稱之為content area 即內容區的高度),之所以文本默認在行框中顯示為居中狀態,上下有間隙,是因為瀏覽器默認給line-height設置有高度,一旦給文本設置有高度,那么相當于在文字上下添加了兩個高度相等的leading,這樣就出現了瀏覽器文字的默認效果,即文字在單行文本中居中,而且上下有間隙。
引申一下inline-box模型的概念
line-box模型大致有這么幾個概念,line-box(行框),當一行行內元素(inline-element)處在同一行時,這一行會生成一個line-box,當然這個盒子你是看不到的,也無法通過css來控制顯現出來,而對于每個行內元素會生成一個inline-box(內聯盒/行內框),這個行內框的高度實質上就是line-height,而line-box的高度可以視為是由最高的那個inline-box所撐開的,因此對于一個line-box而言其高度就是其內部inlne-box的最大line-height。
由上述我們得出一個結論:
- line-box的高度等于其內部inline-box的最大line-height,
- 如果這個line-box內部的inline-box都是文本,那么出現的效果應該是單行文本垂直居中。
- 但是如果這個line-box不只是文本這種內聯框還有圖片等不同line-height的內聯框時,還能保持整體的行內垂直居中對齊嗎? 簡單測試一下,我們可以看出,對于上述情況并未能夠實現文字和圖片都垂直居中