原文連結 CSS深入理解之line-height
line-height，又稱行高，指的是兩行文字基線之間的距離，又可以稱為這行文字所佔的高度。
定義三問：
- 什麼是基線？
- 為何是基線？
- 需要兩行？
如圖紅色線即為基線
基線（baseline），指的是一行字橫排時下沿的基礎線，基線並不是漢字的下端沿，而是英文字母x的下端沿。基線乃*線定義之根本！
基線的擴充套件知識，稍作了解。如圖：
第3個問題，一行文字難道就沒有行高嗎？非也，一行文字也是有行高的，兩行的定義已經決定了一行的表現！
所以，行高表現為，如下圖：（如果試想行高為0，那麼兩行文字將重合）
問題：為何line-height可以讓單行文字垂直居中？
分析：真的垂直居中了嗎？實際上並沒有，只是我們肉眼看上去垂直居中而已！見下圖：
** line-height與行內框盒子模型**
所有內聯元素的樣式表現都與行內框盒子模型有關！例如浮動的圖文環繞效果......
1. <p>這是一行普通的文字，這裡有個<em>em</em>標籤。</p>
複製程式碼這普通的一行包含了4種盒子，下面詳解。
1、內容區域(content area)，是一種圍繞文字看不見的盒子。內容區域的大小與font-size大小相關。圖示如下：
2、內聯盒子(inline boxes)，內聯盒子不會讓內容成塊顯示，而是排成一行。如果(文字)外部包含inline水平的標籤(span、a、em、strong等)，則屬於內聯盒子。如果是個光禿禿的文字，則屬於匿名內聯盒子。圖示會更清楚：
3、行框盒子(line boxes)，每一行就是一個行框盒子，每個行框盒子又是由一個一個內聯盒子組成。
4、
標籤所在的包含盒子(containing box)，此盒子有一行一行的行框盒子組成。
line-height的高度機理——深入理解內聯元素的高度表現
我們來考慮文字佔據的高度，見下例：
標籤的高度從何而來，是由裡面的文字撐開的嗎？答案：不是的，實際上這個高度是由line-height決定的！再看下例：
通過此例說明，內聯元素的高度是由行高決定的！
line-height明明是兩條基線之間的距離，單行文字哪來行高，還控制了高度?
我們需要知道：
1、行高由於其繼承性，影響無處不在，即使單行文字也不例外。
2、行高只是幕後黑手，高度的表現不是行高，而是內容區域和行間距。
只不過，內容區域高度(content area)+行間距(vertical spacing)=行高(line-height)
注意：1、內容區域(content area)高度只與字號(font-size)以及字型(font-size)有關，與line-height沒有任何關係。
2、在simsun字型(即宋體)下，內容區域高度等於文字大小值。所以，在simsun字型下，font-size+行間距=line-height。
行間距上下拆分，就有了半行間距。
測試：font-size=240px，line-height=360px，分別計算行半間距。如圖：
在simsun字型下，行半間距就是60px了。
總結：
行高決定內聯盒子的高度；行間距牆頭草，可大可小(甚至負值)，保證高度正好等於行高。行間距為負值時，舉例說明，在simsun字型下，如果line-height小於font-size，inline box會優先於行高，以保證inline box的高度正好等於行高。例：font-size: 16px; line-height: 12px; inline box高度為12px。content area會溢位，inline box的頂部和底部半行高會摺疊起來，以保證inline box的高度。圖示如下：
問題：如果行框盒子裡面有多個不同行高的內聯盒子?這個時候高度怎麼表現?由行高最高的那個盒子決定?
答案：錯。看下例：
雖然以上特例說明了正好是由行高最高的那個盒子決定，但是還要看下例：
到此就已經說明問題了。vertical-align是內聯元素裡面非常深的一個知識，在此不贅述了。
含多個行框盒子的包含容器，多行文字的高度就是單行文字高度的累加。
** line-height各類屬性值**——深入理解line-height不同類別值的不同表現
line-height支援的屬性值：
- normal
- inherit(繼承)
1、line-height:normal是預設屬性值，對應的具體的行高值是跟著使用者的瀏覽器走的，且與元素字型關聯。如下例(在chrome瀏覽器下，在火狐瀏覽器下可能有偏差)：
改變為宋體：
可見，正是由於normal非常不確定，所以我們在實際網頁開發的時候在全域性元素裡對行高reset，保證相容性。
2、line-height:，如下例：
3、line-height:
使用具體長度值作為行高值。例如：
- line-height:1.5em(相對單位)
- line-height:1.5rem(相對單位，不知道rem是？)
- line-height:20px(固定單位)
- line-height:20pt(固定單位，也不知道pt是？)
4、line-height:，如下例：
5、line-height:inherit，如下例：(比較高階，在此不做深入詳解了)
問題：line-height:1.5、line-height:150%、line-height:1.5em有什麼區別？
答案：從計算上來講，是沒有任何差別的。但應用元素有差別：
- line-height:1.5：所有可繼承元素根據font-size重計算行高。
- line-height:150%/1.5em：當前元素根據font-size計算行高，繼承給下面的元素。
以下例來說明：
例，line-height:1.5時。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <title>Document</title>
6. <styletype="text/css">
7. div {
8. line-height:1.5;
9. font-size:24px;
10. }
11. p {
12. font-size:60px;
13. }
14. </style>
15. </head>
16. <body>
17. <div>
18. <p>我的font-size<br/>為60px~</p>
19. </div>
20. </body>
21. </html>
複製程式碼可繼承元素(
)是重新根據自己的font-size(60px)計算行高的(line-hight=60x1.5=90px)，所以兩行行框盒子高度為180px。
例，line-height:150%時。
當前元素(
)，所以兩行行框盒子高度為72px。
body全域性數值行高使用經驗
1. body { font-size:14px; line-height:?;}
複製程式碼假如是一種專門以閱讀為主的部落格，行高至少要1.5或1.6。如果是平時的面向使用者的網頁開發，匹配20px的使用經驗——方便心算。
line-height=20px/14px≈1.42857(1.4...)，那麼我們是不是該使用1.42857呢？
1. body { font-size:14px; line-height:1.42857?;}
複製程式碼雖然，IE、火狐都是ok的，但chrome的高度是19px，不是20px。所以，我們使用1.4286。
1. body { font-size:14px; line-height:1.4286;}
複製程式碼