如何在 firefox 检查器中跟踪这个计算的 CSS 值？

Question

我刚开始使用 Firefox 的开发人员工具。

我想弄明白为什么我至今无法覆盖给定元素的高度。此页面使用 Bootstrap，但我的问题与此特定问题无关：我想了解如何根据 "Rules" 和 "Computed" 窗格中的信息，我本可以诊断出问题所在。

我试图将此元素的高度设置为 20px，但它仍然保持在 90px（如下面第二个屏幕截图所示）计算高度为 90px。

屏幕截图 #1：

屏幕截图 #2：

问题：我如何使用 Firefox 的检查器找出这里发生了什么？我如何使用它来弄清楚这个 90px 的值是如何得出的？

元素内的代码：

<span class="lang_pt" style="display: none;">O que fazemos</span>
<span class="lang_en" style="display: inline;">What we do</span>

PS：我不写 CSS 太依赖 !important，我想弄清楚这里发生了什么。

Answer 1

内联元素的高度严格由其内容设置。将 display: inline-block; 添加到锚点，这样它就会尊重你的 height: 20px;