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

Question

如何使用浏览器开发工具来测量和区分内联元素的内联框及其内容区域的高度？它可以做一些事情，比如在行内框和内容区域周围放置一个边框，或者为每个区域添加不同的背景颜色。

上下文

给定一些像这样的内联元素的 HTML 代码，需要考虑多个高度:

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

这是生成的内联元素的图表，指出了各个区域的高度:

一个。这是内容区域的高度，15 像素高。

这是行内框的高度，21 像素高。

灰色区域是内容区域。

底部的绿色区域是底部half-leading，高3px，b.的计算结果。负 a.除以二。

如果给 <span> 添加边框元素，边框放置在内容区域周围，而不是行内框周围。我不知道如何在行内框周围放置边框。

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

请注意，在某些情况下，行内框实际上可能小于内容区域。

我正在寻找可以显示这两者之间差异的开发人员工具。

Answer 1

虽然不是确定的解决方案，但我在使用 Dimensions 之前逃脱了添加在。它所做的是从光标位置绘制两条线(每个轴一条)，直到颜色发生变化。然后它返回线的长度。因此您无需手动测量任何东西。

在您的例子中，我找到了您想要的 4 个值中的 2 个。

• 一个。你可以获得内容区域(在我的例子中是 16px，参见 comments )。
• d。底部元素与文本之间的高度 (3px)。
• 包括边框的高度(未在问题中询问)。

当然不是您所要求的最终解决方案，但老实说，我认为没有单一的解决方案。不过，我会期待其他答案。