没有标签包裹的文本,这个高度怎么来的?

新手上路,请多包涵

行内盒子的内容区的高度与字体和字号有关

行内盒子高度却是由line-height的计算值决定的

即使行内盒子的内容区高度大于line-height的计算值

行内级盒子的高度更像是一个逻辑的概念,用来帮助确定行盒(Line box)的高度。

我本来写个dmeo来计算div中一行行盒中不同对齐div方式后的div高度

<body>
    <div style="background-color: aqua;">
       26px怎么来的
       <span style="background-color: pink;">1.32 x 16px = 21.12</span>
    </div>
</body>

谷歌默认设置微软雅黑字体,大小为16px

微软雅黑字体的ascender和descender之和为2703,em-square为2048...

span的内容区高度为 16px * 2703 / 2048 = 21.12px

至于浏览器渲染为20.8我也没查到为什么会这样,知乎上倒是有测试谷歌这种情况,但原因没讲

但是重点是

没有标签包裹的文本为何渲染为26px?

它应该继承父元素的font-size值啊

哎,不懂的地方太多,就这,一两个小时过去了。。。

不吝赐教,顿首!

阅读 1.9k
1 个回答

image.png
并没有出现26的情况

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题