剛一開始學習這個特性的時候，總是出一些當時看起來很奇怪的問題。現在決定重新整理一下。畢竟使用css，十行揉在一起湊出效果是一種使用，知道為什么會有這種效果也是一種使用。我們需要做一些測試，所以首先需要了解一下到底哪些DOM元素適合。
那我們第一個問題就來了。
line-height可以應用於哪些元素
* line-height只影響行內元素，並不能直接應用於塊級元素。 * line-height 具有可繼承性，塊級元素的子元素會繼承該特性，並且在行內元素上生效。 所以，我們在這里可以只考慮行內元素，包括行內替換元素和行內非替換元素，img和span可以分別作為它們典型的代表。
什么是line-height
對於這個問題一直感覺很困惑。定義上說，line-height就是兩個文本行基線之間的距離，難道就是像下圖這樣子:
但是問題來了，如果我分別給兩個元素設置了line-height, 那么哪個line-height是這兩個文本行之間的距離？ 我寫了如下的測試代碼：
<div style="width:170px;"> <span style="font-size:16px;line-height:20px;background:red;">I'm the first line</span> <span style="font-size:16px; line-height:40px;background:green;">I'm the second line</span> </div>
得到結果如圖：
我們可以知道上面一行的行框高度是20px，下面一行是40px。我們就可以算出兩行文本基線之間的間距，應該是(20 - 16) / 2 + (40 - 16) / 2 + 16 = 30。 這個數據看起來和兩個元素的line-height並沒有什么關系。 這便是我當時理解這個概念時走入的誤區，實際上，line-height指的是在同一個元素中，兩個文本行基線間的距離。如下圖所示：
只怪我反應太慢。所以，當我明白這個事情以后，就不對它到底是什么耿耿於懷了。開始關注於它的作用，它是怎樣影響行內框的高度，進而影響整行的行框的高度的。
與height的關系
類似於span的行內非替換元素，我們知道它們的高度並不能通過height直接設置，但是可以由line-height來改變。
類似於input，img的行內非替換元素，在line-height的設置上和塊級元素類似，line-height在自身上並沒有起作用，但是可以應用到子元素上。它們的行內框的高度就是它們內容區的高度，是可以通過height來設置的。
總之呢，這兩個css屬性並沒有什么關系。
line-height與height相等，為什么會使文字居中
這大概是大家會經常遇到的一個問題，大概也是單行文字居中的慣用手段。我思考了一下原因，並且做了一些測試:
<span style="height: 40px;line-height:40px;background:red;display: inline-block;">I'm the first line</span>
顯示如下：
我去掉line-height屬性，顯示如下：
原因是這樣的。文本是屬於textNode，它也是一個DOM元素。當外層元素設了line-height之后，它自然繼承過來，就像我們上文中說過的一樣，顯示在中央，是因為文字自然的落在了textNode的基線上面。
理解了上面所說的這些，我們就能理解為什么有時候設line-height和height相等不起作用了。如下圖代碼：
<span style="height: 40px;line-height:40px;background:red;display: inline-block;padding: 3px;box-sizing:border-box;">I'm the first line</span>
結果如下圖所示：
我加了padding和border-box，也就是說外層的span的內容區域縮小了，但是里面的textNode並沒有什么變化。
好了，感覺總算是弄明白了一個事情。看上去它也不是如狼似虎。
地址：http://www.html-js.com/article/3465
轉自：nanshan231--前端亂燉