前言 ：平常寫CSS習慣性的寫 line-height: 1.5em ，也見過類似 line-height: 1.5 ， line-height: 150% 這種寫法，但是從來沒有想過這三者有什麽區別，最近突然看到有人提到這個問題，很感興趣，於是查資料自己嘗試了壹下。
首先有壹點要明確的是，line-height是具有繼承性的，如果直接在某個元素上使用line-height，那麽這三種寫法是沒有區別的，比如給所有的p標簽添加行高屬性：
最後的效果是壹樣的。
這三種方式的區別在於，給父元素設置行高的時候子元素的繼承方式。
假如我們有壹個父div類名為parent1，另壹個父div類名為parent2，均包含了壹個類名為child的子div，HTML結構如下：
CSS如下：
此時的頁面如下截圖：
可以看到，當設置 line-height: 1.5em 時，很明顯子div的文字已經超出自己的行高範圍了，設置 line-height: 1.5 時子div的文字沒有超出自己的行高。
這是由於CSS繼承時的計算方式區別造成的，如示例，當我們給類名為parent1的父div設置 line-height：1.5em 時，該div的 font-size 為14，此時經過計算父div的 line-height 為14px*1.5=21px，然後子div的 line-height 就會繼承21px這個值，而子div的 font-size 為26px，自然會超出自己的行高範圍。
而當我們給類名為parent2的父div設置 line-height：1.5 時，子div會直接繼承 line-height：1.5 ，然後計算26px*1.5=39px，不會超出自己的行高範圍。
經過測試 line-height: 150% 和 line-height: 1.5em 相同，都是先計算然後把固定的行高繼承給子元素，所以我們可以總結壹下， 繼承line-height的時候，帶單位的先計算再繼承，不帶單位的直接繼承 。
以上就是我對line-height這個屬性壹點淺顯的認識。
參考資料：