Question

长篇故事：我有一个带有一些文字的div。它最初在我的div的顶部和底部创建了一些空间（这不是填充）。我希望我的div只覆盖文本，而不是创建额外的空间。这是我唯一的css：

div {
  background-color: black;
  color: white;
  font-size: 50px
}

<div>This is the text</div>

我正在寻找的是缩小div以仅包含文本而不在底部创建任何空间。我承认，如果你用px调整一下，你会实现这一点，但我正在寻找更通用的方法，因为字体大小会因情况而异。

Answer 1

以下代码缺少字体大小后的（;）：50px;现在要实现空间缩减我建议你使用相同字体大小的行高来指我的修正

您的代码

div {
  background-color: black;
  color: white;
  font-size: 50px
}

我的更正

div {
  background-color: black;
  color: white;
  font-size: 50px;
  line-height: 50px;
}

Answer 2

可能没有“通用”的方法可以做到这一点，因为您看到的间距实际上是字体的一部分，并且您为解决此字体的“问题”所做的任何调整都不一定适用于其他字体。

例如，只需看看Arial如何显示，因为它与未设置特定字体系列时使用的默认字体不同，因此可能必须针对Arial调整默认字体的修复

p {
  background-color: black;
  color: white;
  font-size: 50px;
  line-height: 1;
  font-family: arial;
  display: inline;
}

<p>
  Oh hi i'm different
</p>

在上面的代码片段中，我添加了一个1的行高，以帮助规范化间距。您可以尝试进一步调整，将行高设置为或接近精确的字体大小（以像素为单位），但如果元素中有大量文本，则可能会导致不需要的间距（文本也应该在一个恰当的语义元素，如ap或li，不只是在div中。

最后，你能达到你想要的结果吗？当然。使用行高，边距和/或变换等内容。但是，如果换掉字体，你很可能不会找到一个能够达到所需效果的银弹。

正如塞巴斯蒂安·布罗什在问题评论中提到的那样，从Is it possible to change inline text height, not just the line-height?开始工作可能是你最好的前进道路。