CSS：调整容器相对于文本的高度

我不确定问题的标题。我有一个span标签，上面有填充物（试图在下面的屏幕截图中用黑色箭头突出显示），我不知道如何删除它。我试过使用

线条高度：100%

，但它的顶部也有一些填充物。虽然底边很好

span {
    background-color: red;
    color: yellow;
    border: 1px solid blue;
    font-size: 58px;
}

---

谢谢。

文本上方的额外空间可以通过属性

行高删除

line-height: 0.5em;

看到这个了吗

下面是片段


span{
背景色：红色；
颜色：黄色；
边框：1px纯蓝色；
字号：58px；
线高：0.5em；
}
Fylgpm
属性
行高可以删除文本上方的额外空间

line-height: 0.5em;

看到这个了吗

下面是片段


span{
背景色：红色；
颜色：黄色；
边框：1px纯蓝色；
字号：58px；
线高：0.5em；
}
Fylgpm
您尝试过不同的浏览器和字体吗？我理解您的解释，但为什么要消除这种差距？它实际上是默认的。我确实试过了。浏览器-IE 8，Mozilla和字体-塔荷马，Verdana。但它仍然显示相同的结果。@U!Green先生：消除间隙的原因是需求驱动的，我需要计算跨度的精确高度并进行一些操作。@Shubh没有必要这样做。您可以使用
span.offsetHeight
使用javascript计算高度。如果你说的是字体的高度，那么它就是你在css中提到的
58px
。你尝试过不同的浏览器和字体吗？我理解你的解释，但你为什么要消除这个差距？它实际上是默认的。我确实试过了。浏览器-IE 8，Mozilla和字体-塔荷马，Verdana。但它仍然显示相同的结果。@U!Green先生：消除间隙的原因是需求驱动的，我需要计算跨度的精确高度并进行一些操作。@Shubh没有必要这样做。您可以使用
span.offsetHeight
使用javascript计算高度。如果你说的是字体的高度，那么它就是你在css中提到的
58px
。我建议不要使用span，因为你想控制高度。尝试将div与{display:inline block；行高：0.9em；高度：60px；}一起使用。谢谢@shrinivas，但是当
字体大小增加时，解决方案将剪切字体。见我上面的评论。这里是小提琴：我建议不要使用跨度，因为你想控制高度。尝试将div与{display:inline block；行高：0.9em；高度：60px；}一起使用。谢谢@shrinivas，但是当
字体大小增加时，解决方案将剪切字体。见我上面的评论。这是小提琴：