如何理解16px的字體實際上占位21.33px

1. 行內(nèi)元素的大小不受line-height控制，且無法設(shè)置height，受字體大小和字體類型影響，你可以多換幾個字體看看，是不一樣的。
2. line-height影響的可以理解為行間距，只不過這個行間距會反映到元素高度上。
3. 就你貼的圖來說，就是四舍五入了，這兒是沒有什么間距的，其實應(yīng)該是42.66666666666666666，保留了兩位給你顯示。
4. 不過行內(nèi)元素之間換行確實會有間隙，因為它們之間的換行會被當作一個文本元素，大小受字體相關(guān)影響。

根據(jù)行高來的

第一個問題與字體有關(guān)，某一字體的高度并不僅僅是文字所占的高度，還包括上下的留白。
比如某一英文字體有三個英文字母：h,x,g，它高度并不是其中任何一個字母的高度。而是x的高度加上h的上半部和g的下半部分高度。當然，這個例子只是粗略的講解一下，實際上還有其他細節(jié)知識點。
針對你的問題一，可以設(shè)置span的font-size屬性固定，調(diào)整font-family。
demo
審查元素可以看出不同字體的span元素高度一般是不同的。

至于問題二，應(yīng)該是小數(shù)點舍入的原因。0.333是三分之一，0.6667是三分之二。

這就是你看到的行高是受font-size和line-height決定的