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

【问题标题】：How do I use browser developer tools to inspect content area height as opposed to inline height?如何使用浏览器开发工具检查内容区域高度而不是内联高度？
【发布时间】：2018-09-15 12:08:03
【问题描述】：

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

上下文

鉴于这样的内联元素的一些 HTML 代码，需要考虑多个高度：

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

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

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

b.这是内嵌框的高度，21px 高。

c。灰色区域是内容区域。

d。底部的绿色区域是底部半领先，高3px，是b.减去a.除以2的结果。

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

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

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

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

【问题讨论】：

如果您要求像素值或 CSS 属性，我有点困惑。例如，如果我测量您示例中的像素，则框内为 16px，边框为 18px。
您应该在框内获得 15px 以匹配字体大小 这是否取决于正在呈现的字体？请参阅此demo ... 两个跨度都定义了字体大小 15px，但字体不同。它们产生不同的高度
我的测量工具是截屏和计算像素，所以我有点困惑。如果您想要的是像素完美（实际渲染的内容，16px）或虚拟值（应该是，在这种情况下为 15px）。假设您有一个可以直观地计算像素的工具，可以吗？
@zgood 你是对的。我没有意识到这一点。您知道字体中的原因是什么吗？
@Flimm 不同的字体将具有为其字形定义的不同垂直高度度量（称为上升/下降值）（有点像实际字符顶部和底部的填充）。查看这篇文章here，它可以更好地解释它（并且有图片！）。

标签： html css google-chrome-devtools firefox-developer-tools

【解决方案1】：

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

在你的情况下，我找到了你想要的 4 个值中的 2 个。

一个。您可以获取内容区域（在我的情况下为 16px，请参阅comments）。
d.底部元素和文本之间的高度 (3px)。
包括边框的高度（未询问）。

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

【讨论】：

这是一个很棒的发现！我相信我将来会使用这个工具。不幸的是，我不能对答案投赞成票，因为我想知道 inline box 的高度，这无法使用此方法完成，我想知道浏览器的值正在使用，无论是否呈现边框。