line-height是可以繼承的，所以子元素就可以不用重復定義line-height了。我們一般也會在後面帶上單位(如:line-height:22px; 或是line-height:1.4em;)，但line-height會給人帶來麻煩的地方也就是這個繼承和後面加的單位。
我們先看一張圖：
上面的這張圖片大家會覺得眼熟。CSS高手一眼就能看出這是line-height導致的，有的時候，我們為了實現單行文字的垂直居中，會給line-height一個和height相同的固定的值；有的時候，我們為了調整特定的某段文字 的行間距，通常會考慮使用百分比或者相對尺寸的em。或許是習慣，於是我們都習慣了line-height是要有單位的。這些情況下，我們都不需要考慮 line-height的繼承,也不會發現任何問題，當然後我們在使用到line-height繼承的時候，就會發現問題的所在。
例如下面的代碼：
CSS樣式如下：
.test{line-height:1.4em; font-size:12px;}
span{font-size:30px; font-weight:bold;}
HTML結構如下：
<div class="test">
<span> 白培銘先生於1960年出生於中國台灣。<br/>
畢業於中國台灣省清華大學核物理系，<br/>
</span>
之後留學於美國加州大學伯克利分校和密西根大學，獲得雙碩士學位。<br/>
在工作之後，憑著對營銷領域的濃厚興趣，他又考入密執安大學深造<br/>
</div>
對於上面的代碼，我們可以使用“HTML在線編輯器”進行測試一下。
看過例子後，你會發現，只要有單位的line-height繼承，都發生了重疊的現象。那到底這是什麼原因導致的呢？
如果line-height屬性值有單位，那麼繼承的值則是換算後的一個具體的px級別的值；而如果屬性值沒有單位，則浏覽器會直接繼承這個 “因子（數值）”，而非計算後的具體值，此時它的line-height會根據本身的font-size屬性值重新計算得到新的line-height 值。
如例一，div的line-height為150%，由於默認情況的字體大小為16px，所以div的具體line-height值可換算為 16px*150%=24px，由於pre的line-height會繼承24px這個換算過後的具體值，此時pre又被重新定義了font- size:30px;字體大小超過了line-height的大小，於是發生重疊。其它單位原理一樣。
解決方案3 ( 推薦 )：為了應付各種不可盡知的情況，請習慣不要給line-height單位。