css - 为什么代码标签的行高是 "broken"？

Question

使用此 HTML 和 CSS:

code {
  background-color: grey;
  padding: 2px 7px;
  line-height: 24px; /* this doesn't seem to do anything, but added anyway */
}

p {
  line-height: 24px;
}

<p>test 1</p>
<p>test <code>2</code></p>

第一段的高度为 24px，而第二段的高度为 25px，即使两者具有相同的行高和计算的行高值 (24px)。

如果添加 line-height: normal;到 <code>标记，问题已解决。

为什么？

在这两种情况下，行高和计算的行高是相同的。为什么不同的高度以及为什么代码需要行高:正常？这不是已经默认了吗？

编辑:即使给出 line-height: 24px到 <code>标签，它计算的高度仍然是 25px。

Answer 1

如果一行中有两种不同规范的不同字体，即使它们具有相同的像素高度，总高度也可能与其中一种字体的高度不同。

问题是，字体位于基线上，因此如果一种字体具有较大的下行部分(和较小的上行部分)，则会发生以下情况:

如您所见，总高度大于黑色矩形，即使这些矩形具有相同的高度!

至于line-height属性，记住这个属性是继承的。
因此，如果您在 p 上设置 24px 的值，则 code 的行高也为 24。但是如果您随后显式重置code的值为normal，code的行高重置为字体大小的1.2倍。
因此 code 的行高(以及高度)为 19 像素，并且它不再影响 p 的总高度。