如何理解16px的字体实际上占位21.33px

Question

疑问1、这里设置的字体为16px line-height为15px
但是实际占位却是21.33px 设置line-height也不能解决

疑问2、为什么两个span之间会有空隙

合起来不应该是42.66 怎么多了0.01px

这个问题好像经常会遇到一般来说设置line-height有时候可以解决有时候不能 所以想彻底弄清楚这个问题
特此求助 以上

Answer 1

第一个问题与字体有关，某一字体的高度并不仅仅是文字所占的高度，还包括上下的留白。
比如某一英文字体有三个英文字母：h,x,g，它高度并不是其中任何一个字母的高度。而是x的高度加上h的上半部和g的下半部分高度。当然，这个例子只是粗略的讲解一下，实际上还有其他细节知识点。
针对你的问题一，可以设置span的font-size属性固定，调整font-family。
demo
审查元素可以看出不同字体的span元素高度一般是不同的。

至于问题二，应该是小数点舍入的原因。0.333是三分之一，0.6667是三分之二。

Answer 2

1. 行内元素的大小不受line-height控制，且无法设置height，受字体大小和字体类型影响，你可以多换几个字体看看，是不一样的。
2. line-height影响的可以理解为行间距，只不过这个行间距会反映到元素高度上。
3. 就你贴的图来说，就是四舍五入了，这儿是没有什么间距的，其实应该是42.66666666666666666，保留了两位给你显示。
4. 不过行内元素之间换行确实会有间隙，因为它们之间的换行会被当作一个文本元素，大小受字体相关影响。

Answer 3

根据行高来的

Answer 4

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