頂線、中線、基線、底線
<!DOCTYPE html><html>
<head>
<title>Test</title>
<style type="text/css" >
span
{ padding:0px; line-height:1.5;
} </style>
</head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
</div>
</div>
</body><html>
從上到下四條線分別是頂線、中線、基線、底線，很像才學英語字母時的四線三格，我們知道vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關。
行高、行距與半行距
行高、行距與半行距：
行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。
行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。
半行距是行距的一半，即區域
3垂直距離/2，區域1，2，3，4的距離之和爲行高，而區域1，2，4距離之和爲字體size，所以半行距也可以這麼算：（行高-字體size）/2。
內容區、行內框、行框
內容區、行內框、行框：
內容區：底線和頂線包裹的區域，即下圖深灰色背景區域。
行內框：每個行內元素會生成一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，在沒有其他因素影響的時候（
padding等），行內框等於內容區域，而設定行高時行內框高度不變，半行距[（行高-字體size）/2]分別增加/減少到內容區域的上下兩邊（深藍色區域）。行框（
line box）：行框是指本行的一個虛擬的矩形框，是瀏覽器渲染模式中的一個概念，並沒有實際顯示。行框高度等於本行內所有元素中行內框最大的值（以行高值最大的行內框爲基準，其他行內框採用自己的對齊方式向基準對齊，最終計算行框的高度），當有多行內容時，每行都會有自己的行框。
line-height
line-height屬性設置行間的距離（行高），不能使用負值。該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計算值之差(行距)分爲兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
| 值 | 說明 |
|---|---|
normal | 默認,設置合理的行間距。 |
number | 設置數字，此數字會與當前的字體尺寸相乘來設置行間距。相當於倍數 |
length | 設置固定的行間距 |
% | 基於當前字體尺寸的百分比行間距 |
inherit | 規定應該從父元素繼承 line-height 屬性的值 |
單行文字垂直居中
line-height的大小爲元素的高度即可實現效果。
<div style="line-height:100px;border:dashed 1px #0e0;"> This is a test.</div>
元素對行高影響
行框高度是行內最高的行內框高度，通過line-height調整，內容區行高與字體尺寸有關，padding不對行高造成影響。
<div style="border:dashed 1px #0e0;margin-bottom:30px;"> <span style="font-size:14px;background-color:#999;">This is a test</span></div><div style="border:dashed 1px #0e0;"> <span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span></div>
第二個
span雖然因爲padding原因內容區變大，當行高並未改變。
行高的繼承
行高是可繼承的，但並不是簡單的copy父元素行高，繼承的是計算得來的值。
<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;"> <p style="font-size:30px;"> 1232<br/></p></div>
如果屬性值沒有單位，則瀏覽器會直接繼承這個因子（數值），而非計算後的具體值，此時它的line-height會根據本身的font-size值重新計算得到新的line-height值。
作者：小小的白菜
鏈接：https://www.jianshu.com/p/59f31a1704de
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。