html - 如何使用浏览器开发人员工具检查内容区域的高度而不是内联高度？

如何使用浏览器开发人员工具测量和区分内联元素的内联框及其内容区域的高度？它可以在内联框和内容区域周围设置边框，或者为每个边框添加不同的背景色。
上下文
给定这样的内联元素的一些HTML代码，需要考虑多个高度：

<span style="font-size: 15px; line-height: 21px">inline element</span>

下面是生成的内联元素的图表，其中指出了各个区域的高度：

这是内容区的高度，15像素高。
这是内联箱的高度，21px高。
灰色区域是内容区域。
d.底部的绿色区域是下半部前导，高度为3px，计算结果为b.减去a.除以2。
如果向<span>元素添加边框，边框将放置在内容区域周围，而不是内联框周围。我不知道如何在内联框周围加边框。

<span style="font-size: 15px; line-height: 21px; border: 1px solid black">inline element</span>

注意，在某些情况下，内联框实际上可以小于内容区域。
我正在寻找开发工具，可以显示这两件事之间的区别。

最佳答案

虽然不是一个确定的解决方案，但我在使用Dimensions加载项之前逃脱了惩罚。它所做的是从光标位置绘制两条线（每个轴一个），直到有一个颜色变化。然后返回行的长度。所以你不需要手动测量任何东西。
在你的例子中，我找到了你想要的4个值中的2个。
你可以得到内容区（在我的例子中是16px，见comments）。
d.底部元素和文本之间的高度（3px）。
包括边框的高度（无疑问）。
当然不是你所要求的最终解决方案，但老实说，我不认为只有一个解决方案。不过，我会期待其他答案。

关于html - 如何使用浏览器开发人员工具检查内容区域的高度而不是内联高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49676250/