【學習筆記】行高 line-height 的基本概念

整理一下關於行高的一些基本概念。原文連接：http://www.zengkan.win/?p=84

1.定義

每一個文本行中能夠看作有四條線：頂線，中線，基線和底線。相似英語做業本上的「四線三格」。以下圖（圖片來自@夢禪的文章）
line-height 行高就是指兩個文本行相同線之間的距離。同一行的頂線到底線的距離就是內容區域高度，內容區域的高度只與字體和字號有關，在有的字體(simsun等)中，字體大小等於內容區域高度。上一行的底線和下一行的頂線的距離是行間距。能夠看出，行高 = 內容高度+行間距，當咱們改變 line-height 的值時，內容高度是不變的，改變的只是行間距，從而改變了行高。

2.高度

一個空元素的高度默認是0，而當這個元素中有內容時，元素就會被撐開，會有高度。以前我覺得這個高度是文字的高度撐開的，而從@張鑫旭的文章中知道這個高度是由 line-height撐開的。如下代碼結果以下：

<div style="background:#999;line-height:1px;font-size:20px;">行高爲1</div>
<div style="background:#999;line-height:20px;font-size:0;">行高爲默認</div>

第一個 div 的行高爲1像素，字體大小爲20像素，最終高度爲1像素；
第二個 div 行高爲20像素，字體大小爲0，最終高度是20像素。說明在沒有設置固定高度的元素中，高度並非由文字撐開，具體高度是怎麼產生的，先了解下面的幾個概念。

3.行內框盒模型

1. 行內框 inline boxes ：行框下面的每個標籤（包括文本標籤）都是一個單獨的行內框。行內框的高度由行高line-height決定。

2. 行框line boxes ：每行文字都是一個行框，行框包含這一行行內框的最高點和最低點。行框的高度是這一行行內框的最高點到最低點的距離。The line box height is the distance between the uppermost box top and the lowermost box bottom.

3. 包含盒子containing box：元素中行框的高度垂直疊加造成包含盒子的高度，也就是元素的高度。

因此在沒有設置固定高度的元素中，高度是由這個元素中全部行框高度疊加而成的。

提示： 有種說法是行框的高度等於這一行中行內框中最大的line-height，這種說法是錯誤的。

<div style="line-height:30px">
    行內框1,行高30px<span style="line-height:50px;background:yellow;vertical-align:-20px">行內框2,行高50px,</span>        
</div>

上述代碼結果如上圖，這個 div 中的行內框最大的行高是50像素，但因爲這個行內框存在 vertical-align 誤差，因此這個行框的高度大於50像素。也就是行框的高度是這一行行內框的最高點到最低點的距離。

4.繼承

line-height 屬性是能夠繼承的，不過繼承規則因父元素的取值而異。具體以下表：

值得注意的是，父元素的 line-height 值設置爲130%或1.3對自己來講是同樣的，但對於下面的子元素來講兩種設置方式的繼承規則不同，因此繼承到的行高也是有差異的。

實用tip

上面圖片中，外面元素沒有設置height，由內容撐開，可是圖片下方默認會有一些間距。這個間距產生的緣由：圖片和文字是同一個行框下的行內框，兩者默認基線對齊，下面的邊距實際上是基線和底線之間的距離。當父元素中只有圖片這一個元素時，也會有這個問題，能夠看作是元素內部默認會有一個空白的文字節點。

解決辦法：

1. 設置父元素 line-height 爲0，基線和底線就會重合，間距就會消失。

2. 圖片設置 vertical-aligh 爲 bottom ，底線對齊。

3. 圖片設置 display 爲block，由於塊元素沒有vertical-align屬性，因此不存在基線對齊。

上面三種辦法中，1和3會影響父元素內的文字狀態，因此第二種辦法比較好。