一次內聯元素錯位引發對line height的思考

line-height 對於乙個前端小可愛來說，應該是乙個會經常碰面的老朋友了。可是有一天，我突然發現自己好像對他沒那麼了解，他也沒有外表看起來的那麼簡單。

事情的經過是這樣的……

在偶然一次工作中，我寫了這樣的模板：


class="name">重大疾病險span>
class="tip">保額每月可累計span>
div>
複製**

div .name .tip

複製**

兩個相鄰的內聯元素，字型一大一小，行高相同，由於第二段文字需要有字多情況就自動去下一行的效果，所以第二個span是inline-block我暢想的結果是，兩個 span 高度都是 20px, div 高度也是 20px，多麼完美。但結果往往不近人意……

div 的高度怎麼是 28??

再一看子元素，乙個 28 乙個 20??

明白了上述的疑問以及原理，接下來就看下怎麼解決這個問題。

解決一我們可以給父div的line-height設定乙個很小的值

div em.name .tip

複製**

這樣，幽靈節點的行高就只有 5px，父元素行高 20px，沒毛病。但這個方法還不夠完美，因為你需要想一下這個很小的值……

解決二當 line-height 設定為乙個無單位的數值時，表示是某倍的font-size。

div em.name .tip

複製**

給父元素設定line-height為1，這樣，子元素高度都是自己的font-size，包括幽靈空白節點。這樣就不會再有人無意間撐高父元素了。當然，除非你的幽靈空白節點繼承下來了乙個很大的 font-size, 這點你得明白。

解決三既然行高可以與 font-size 有關，font-size 也是可繼承的，那我們將父元素的 font-size 設為 0

div em.name .tip

複製**

可以看到，我們模仿的那個幽靈節點已經沒有了，寬高都是 0 了，父元素的高度也自然就回到了 20px。

前端小白，有講解錯誤或不全之處，還望大佬們嘴下留情，歡迎指正~