使用line-height：0时，文本被推高1px

Question

字体实际上从未在span中的文本上发生变化，但其父级（段落）上的字体确实如此。 line-height: 0;适用于范围。

请参阅下面的gif： 请参阅以下codepen以在浏览器中进行测试

https://codepen.io/BelfordZ/pen/ZxvKxe

这个问题的答案应该是：

1. 解释当文本的字体实际上从未发生变化时文本向上移动的原因。
2. 提供一种解决方案，无论使用哪种字体都可以使用，并保持范围内的样式不变。 （即：line-height: 0;必须保留）。如果无法做到这一点，请解释原因。

Answer 1

这与line-height:0;无关。您可以证明我将该行注释掉，并只更改段落上的设置。

您可以回答自己的问题：“字体中的字体实际上从未发生变化，但其父级字体（段落）。”

• 解释当文本的字体实际上从未发生变化时文本向上移动的原因。

如果没有在p元素上设置字体，它将从层次结构中的前一个元素继承，如果没有找到，则浏览器具有默认字体。就我而言，它是Times New Roman，16px。

由于您将段落上的字体从默认字体更改为您指定的字体，因此当浏览器放置span-element所在的位置时，浏览器会使用默认字体的特征（从浏览器的角度来看，span标记是一个字符）你可以看到这个效果更多你在段落上设置一个大的字体大小和跨度上的一个小字体：p {font-size:30px;} span{font-size:10px;}

span-element上的

line-height:0;没有给出行高为0，因为span是一个内联元素：尝试添加'display：block;'在跨度上看看我的意思。跨度上的行高为0或1之间没有区别（但如果将其更改为块元素则存在很大差异）。

• 提供无论使用哪种字体都可以使用的解决方案，并保留line-height: 0

您可以在p元素上设置line-height: 0，以消除字体效果，然后在span-element上设置line-height: 1。 （我认为你真的不想要行高：0;）

p {
  line-height: 0;
}

span {
  line-height: 1;
}