CSS：理解行高 line-height

行高、行距、半行距

從上到下四條線分別是 頂線，中線，基線，底線。

行高

指文本行基線間的垂直距離。上圖任意兩條相同顏色的垂直距離也是行高。
行高數值上等於 字體大小+行距，而行距的一半（半行距）加在頂線上方，一半加在底線下方。

行距

指一行底線到下一行頂線的垂直距離。

半行距

行距的一半。半行距 = (行高 - 字號) / 2
CSS 中的 margin-top 不是從文字的頂線算起的，而是從離頂線半個行距的上方開始算起的。同理，margin-bottom 是從離底線半個行距的下方開始算起的。

繼承

line-height 是能夠繼承的。父元素不一樣的行高單位影響子元素的繼承。例如：

• 父元素的行高爲 24px 時，子元素直接繼承此固定的行高

• 父元素的行高爲 150% 或 1.5em 時，會根據父元素的字體大小先計算出行高值而後再讓子元素繼承

• 父元素的行高爲 1.5 時，根據子元素的字體大小動態計算出行高值讓子元素繼承。

JSFiddle 源碼