作者：極客小俊
我不用拼過聰明人，我隻需要拼過那些懶人 我就一定會超越大部分人!
line-height 屬性及原理完全詳解
概念: 行高指的是文本行的基線之間的距離, 更簡單來說行高是指文本行基線間的垂直距離, 行高也是文字大小與行距的和, 行高越大則行間距越大!
註意：line-height屬性不允許使用負值。
但是很多人就隻是知道 line-height屬性用於設置行高, 而行高到底是一個什麼東西並不是很清楚!
那麼在瞭解行高之前,我們就必須要先掌握這幾個概念: 頂線、中線、基線、底線、x-height、ex、內聯盒模型、行距等..
知道這些概念之後才能真正的去理解line-height屬性的意義!
那現在我們就來看一張文字在網頁中的結構圖:
從上到下四條線分別是頂線(綠色)、中線(藍色)、基線(紅色)、底線(紫色)
圖中黃顏色的線位置表示: 行間距 其實是分為上一行文字的下半行距 和 下一行文字的上半行距, 這裡要是聽不懂 沒關系 我們接下來會慢慢說半行距的意義!
小提示: 之後我們要講到的vertical-align css屬性中有top、middle、baseline、bottom，就是和這四條線相關!
什麼是基線?
要瞭解基線 那麼還要知道 在我們英文的26個字幕當中 有一個小寫的x字母是在CSS中相當特殊的! 那麼基線是什麼呢？
解答: 基線就是小寫x字母的下邊緣(線) 就是我們常說的 基線 而不是那些有尾巴的英文字母, 例如: s 、j、g、k、f、y
所以一定要註意: 基線（baseline）不是漢字文字的下底部，而是英文小寫字母“x”的下底部!
內聯元素默認是按照基線對齊的 而基線就是小寫字母x的底部! 不懂的話舉個例子 如下:
北京市
<span>深圳市</span>
<strong>計算機</strong>
<img src="images/1.gif">