【學習筆記】CSS深刻理解之line-height

張鑫旭的CSS深刻理解之line-height學習筆記

line-height的定義

行高：兩行文字基線之間的距離

爲什麼是基線：基線是定義全部字線的根本

不一樣字體和基線的距離不一樣，在字格中放置的樣式不一樣

行內框盒模型

• 內容區域（content area）
• 內聯盒子|行內框（inline boxes）
• 行框盒子|行寬（line boxes）
• 包含盒子（containing box）

內聯盒子模型

行高決定內聯盒子高度

內容區域高度只與字號和字體有關，和行高無關

行間距（vertical padding）= 行高 - 內容區域

行框高度是行內最高內聯盒子到最低內聯盒子的距離

line-height屬性值

• normal: 和瀏覽器以及元素字體相關
• 數值：1.5，根據當前元素的font-size計算
• 百分比：150%，根據當前元素的font-size計算
• 具體長度：1.5em, px, rem
• inherit：input的默認行高爲normal，使用inherit可更改成上下統一

1.5, 1.5em, 150%的差異

• 1.5 - 繼承line-height，元素根據自身的font-size計算
• 1.5em, 150% - 設置line-height的元素計算好具體值再向下傳遞該值

line-height與圖片

隱匿文本節點產生一個不可見的行內框，圖片默認對齊基線，致使圖片並不是貼緊容器底邊
https://codepen.io/curlywater...

line-height和height設置一致

對單行行內元素的垂直居中，有一種慣用的方法，設置line-height和height一致。
內聯盒子的高度由line-height決定，height限制包含盒子的高度，二者一致，即把內聯盒子安放在包含盒子內，排除其餘外界干擾。
這時候由內聯盒子模型可知，行間距是等分的，中間部分是content area，達到看似居中的效果。

但其實這個時候，並非徹底居中；
https://codepen.io/curlywater...
上面的例子裏，增長字體大小，發現inline-block的盒子再也不居中；
結合vertical-align來講明，vertical-align:middle實際上是根據x字符的中心線居中，因爲字符有下沉的特性，致使這條中心線並不與容器中心線重合。
內聯盒子模型中，content-area的高度受font-size影響，font-size變大，content-area的空間變大，基線的位置向下，x的位置也向下偏移，兩條中心線之間的差距也就越大。

能夠獲得結論：line-height和height設置一致，並不是是徹底垂直，除非font-size爲0。