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

如何使用browser developer工具测量和区分内联元素的内联框及其内容区域的高度？它可以在内联框和内容区域周围添加边框，或者为每个框添加不同的背景色

上下文 给定一些类似这样的内联元素的HTML代码，需要考虑多个高度：

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

---

虽然不是一个确定的解决方案，但我在使用插件之前逃脱了。它所做的是从光标位置绘制两条线（每个轴一条），直到颜色发生变化。然后返回行的长度。所以你不需要手动测量任何东西

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

• a。您可以获得内容区域（在我的例子中为16px，请参阅）
• d。底部元素和文本之间的高度（3px）
• 高度，包括边界（无疑问）

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

---

如果您询问像素值或CSS属性，我有点困惑。例如，如果我在你的例子中测量像素，我在框内得到16px，在边框上得到18px。你应该在框内得到15px，以匹配字体大小。这取决于渲染的字体吗？看这个。。。两个跨距都定义了字体大小15px，但字体不同。他们生产不同的高度我的测量工具是截图和计算像素，所以这就是为什么我有点困惑。如果您想要的是像素完美（实际渲染的是16px）或虚拟值（在本例中应该是15px）。比如说，如果你有一个可以直观计算像素的工具，那可以吗？@zgood你是对的。我没有意识到这一点。您知道字体中的什么导致了这种情况吗？@Flimm不同的字体将为其字形定义不同的垂直高度度量（称为上升/下降值）（有点像实际字符顶部和底部的填充）。看看这篇文章，它做了一个更好的解释（它有图片！）。这是一个伟大的发现！我确信我将来会使用这个工具。不幸的是，我无法对答案进行投票，因为我想知道内联框的高度，而这无法使用此方法完成，而且我想知道浏览器正在使用的值，无论是否渲染边框。