css line-height

 

行高、行距

行高是指文本行基線間的垂直距離。那什麼是基線呢？記不記得vertical-align屬性有個baseline值，這個baseline就是基線。看張「盜圖」（選自下面的參考文章），其實我也修改了一下啦~

注意：倒數第二根是基線哦，最下面那根是底線，不是基線。

圖中兩條紅線之間的距離就是行高（line-height），上一行的底線和下一行的頂線之間的距離就是行距，而同一行頂線和底線之間的距離是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之間的關係看圖片的右下角就一目瞭然了~

半行距 = （line-height - font-size）/2

固然，半行距也可能爲負值（當line-height < font-size），這時候兩行之間就會重疊，以下圖所示： 

4種box

要說的4種盒子分別是inline box、line box、content area、containing box ~

• inline box (行內框) 每一個行內元素會生成一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，沒法顯示出來，行內框的高度等於font-size，設定line-height時，行內框的高度不變，改變的是行距。

• line box （行框） 行框是指本行的一個虛擬的矩形框，由該行中行內框組成。行框也是瀏覽器渲染模式中的一個概念，沒法顯示出來。行框高度等於本行中全部行內框高度的最大值。當有多行內容時，每一行都有本身的行框。

• content area （內容區） 內容區是圍繞着文字的一種box，沒法顯示出來，其高度取決於font-size和padding。我的以爲：內容區的高度 = font-size + padding-top + padding-bottom，有待查證，也期待小夥伴們給出答案~

• containing box containing box 是包裹着上述三種box的box，有點繞哈~看圖

原諒我畫圖水平有限，不過仔細辨認仍是能看出來的~ ^_^

取值

通常狀況下，瀏覽器默認的line-height爲1.2。能夠自定義 line-height 覆蓋這個初始值，那麼該怎樣設置line-height呢？有如下5種方式：

值	描述
normal	默認。設置合理的行間距。
number	設置數字，此數字會與當前的字體尺寸相乘來設置行間距，即number爲當前font-size的倍數。
length	設置固定的行間距。
%	基於當前字體尺寸的百分比行間距。
inherit	規定應該從父元素繼承 line-height 屬性的值。

看起來如此簡單~可是，line-height是個可繼承屬性，它的繼承規則有那麼一點點複雜……

繼承

須要提早說明的是：line-height的大小與font-size息息相關，除了指定line-height爲多少px，剩下的設置方式都是基於font-size算出來的。 下面逐個講一講~

• inherit 這個其實沒什麼說的，繼承父元素line-height的值，因此父元素的是多少就是多少。 若是其後代元素不設置line-height 的話，也會是這個值。

• length 假設設置 line-height 爲20px，那麼該行的該行的行高就是20px，與 font-size 無關，不會隨着 font-size 作相應比例的縮放。 這個長度值（20px）會被後代元素繼承，全部的後代元素會使用這個相同的、繼承的 line-height (20px)，除非後代元素設定 line-height 。

• 百分比 假設自身的 font-size 爲16px，line-height 設爲120%。那麼其行高爲：16 * 120% = 19.2px。即 line-height 是根據自身的 font-size 計算出來的。 子元素會繼承父元素的line-height，那麼它繼承的是什麼呢，百分比（120%）？仍是19.2px？ 答案是後者，19.2px，即父元素line-height計算後的最終值。

• normal line-height 設置爲 normal 的時候，行高取決於瀏覽器的解析，通常是1.2。 與前面不一樣的是，line-height 設置爲 normal 的元素，其子元素再也不繼承其line-height計算後的最終值，而是根據子元素自身的 font-size 進行計算。見下表~

  element	font-size	line-height	計算後的lline-height
  body	16px	normal	16px * 1.2 = 19.2px
  h1	32px	normal	32px * 1.2 = 38.4px

  可見，子元素隨着自身 font-size 的大小而作相應比例的縮放。

• 純數字 若是既想要 normal 的靈活，又想設置一個自定義的值，那就要用 純數字 啦~ 純數字方式與 normal 惟一的不一樣，就是數值的大小，純數字能夠本身隨意設定，而 normal 的值是瀏覽器決定的。

  element	font-size	line-height	計算後的lline-height
  body	16px	1.5	16px * 1.5 = 24px
  h1	32px	1.5	32px * 1.5 = 48px

  其後代元素會繼承這個數值（好比 1.5），而後根據自身的 font-size 算出自身的line-height。

總結以下：

設置方式	line-height	計算後的line-height	子元素繼承的line-height
inherit	父元素的line-height值	不用計算	父元素的line-height值
length	20px	不用計算	20px
%	120%	自身font-size (16px) * 120% = 19.2px	繼承父元素計算後的line-height值 19.2px，而不是120%
normal	1.2	自身font-size (16px) * 1.2 = 19.2px	繼承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px
純數字	1.5	自身font-size (16px) * 1.2 = 19.2px	繼承1.5，line-height = 自身font-size(32px) * 1.5 = 48px

那麼，哪種是最好的方式呢？ 通常來數，設置行高的值爲 純數字 是最推薦的方式，由於其會隨着對應的 font-size 而縮放。

---

這是對line-height的一點總結，歡迎小夥伴們拍磚哈~