之前對css中行高line-height的理解還是有些膚淺，深入後才發覺裡面包羅永珍。學習行高line-height,首先從基本原理開始
（標註該文章** 該文章略有補充四種盒子）
頂線/中線/基本/底線
中文englishenglish中文
行高概述 指一行文字的高度。具體來說是指兩行文字間基線之間的距離。
如上圖所示 從上往下依次是頂線/
中線/基線/底線
這很像初學英語時的四線三格本子，
其中vertical-align中屬性有
top
、middle、baseline、bottom
與四條線相關。
尤其記得基線不是最下面的線，最下面的是底線。
行高/行距/半行間距
行高是指上下文本行的基線間的垂直距離，即上圖中兩條紅線間垂直距離。
行距是指一行底線到下一行頂線的垂直距離
，即第一行粉線和第二行綠線間的垂直距離。
半行間距即區域3垂直距離/2，區域1，2，3，4的距離之和為行高，而區域1，2，4距離之和為字型size，所以半行距也可以這麼算：（行高-字型size）/2
四種盒子 內容區域/行內框/行框/包含盒子
(備註: 決定行高高度的幕後者是內容區域與行間距其中
1、內容區域(content area)高度只與字型大小(font-size)以及字型(font-size)有關
2、只有在simsun字型(也即宋體)下，font-size+行間距=line-height)
內容區域(content area)底線和頂線包裹的區域，即下圖深灰色背景區域。
行內框(inline box)每個行內元素會生成乙個行內框，行內框是乙個瀏覽器渲染模型中的乙個概念，無法顯示出來，在沒有其他因素影響的時候（padding等），行內框等於內容區域，
而設定行高時行內框高度不變，半行距【（行高-字型size）/2】分別增加/減少到內容區域的上下兩邊（深藍色區域）
行框行框（line box），行框是指本行的乙個虛擬的矩形框，是瀏覽器渲染模式中的乙個概念，並沒有實際顯示。行框高度等於本行內所有元素中行內框最大的值
（以行高值最大的行內框為基準，其他行內框採用自己的對齊方式向基準對齊，最終計算行框的高度），當有多行內容時，每行都會有自己的行框。
包含盒子 containing boxcontaining
包含上述三種盒子 （綜合4種盒子如下圖所示）
中文english中文english
english中文
english中文
行高單位
定義：line-height 屬性設定行間的距離（行高），不能使用負值。該屬性會影響行框的布局。在應用到乙個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計算值之差(行距)分為兩半，分別加到乙個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。值說明
normal
預設,設定合理的行間距。
number
設定數字，此數字會與當前的字型尺寸相乘來設定行間距。相當於倍數
length
設定固定的行間距。
%基於當前字型尺寸的百分比行間距。
inherit
規定應該從父元素繼承 line-height 屬性的值
行高屬性暫時先簡單概述 更詳細部分
單行文字垂直居中
this is a test.多行文字垂直居中多行文字垂直居中.多行文字垂直居中.
行內框對行高的影響
行框高度是行內最高的行內框高度，通過line-height調整，內容區行高與字型尺寸有關，padding不對行高造成影響。
行高的繼承之百分比
行高是可繼承的，但並不是簡單的copy父元素行高，繼承的是計算得來的值。
1.line-height是120% body字型是16px計算出的行高是19.2px會被層疊下的元素繼承下去2.line-height不會隨著font-size做相應的縮放
【資料參考】
** 行高line-height的一些深入理解及應用/
CSS中的line height行高屬性學習教程
基本概念 1.行高 行距 行高是指文字行基線間的垂直距離。那什麼是基線呢？記不記得vertical align屬性有個baseline值，這個baseline就是基線。看張 盜圖 選自下面的參考文章 其實我也修改了一下啦 注意 倒數第二根是基線哦，最下面那根是底線，不是基線。圖中兩條紅線之間的距離就...
CSS行高line height的理解
一 行高的字面意思 行高 顧名思義指一行文子的高度。具體來說是指兩行文子間基線間的距離。基線是在英文本母中用到的乙個概念，我們剛學英語的時候使用到的那個英語本子每行有4條線，其中底部第二條線就是基線，是a,c,z,x等字母的地邊線。頂線 top line 中線 middle line 基線 base...
深入理解css行高line height
行高是相鄰兩行文字基線之間的垂直距離。看清楚是基線，估計有很多前端搞了幾年的都說不出個所以然。小時候我們寫英文26個英文本母的單詞本 隨便找個圖 一行裡面有四條線，在css中乙個行內非替換元素 例如span，em等 其內容區都會存在四條假想的線，分別是底線 bottom 基線 baseline 中線...