为什么代码标签的行高“被破坏”？

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属性，请记住此属性是继承的 因此，如果您在24px上设置p的值，则code也会获得24的行高。但是，如果您明确将code的值重置为{ {1}}，normal的行高重置为字体大小的1.2倍 那么code的线高（以及高度）是19像素，它不再影响code的总高度。