删除行框中字符上方和下方的额外空格

Question

正如W3在inline formatting contexts部分中指定的那样，用户代理将内联框插入到垂直的行框堆栈中。

此外，W3还指出行框的高度由line height calculations

部分中给出的规则决定

当我在测试网站上创建一个简单的内联<span>时，我发现文本上方和下方有一点空间。我试图弄清楚它来自何处，并通过调整行高属性来修剪它。

我只是尝试过：

<span style="line-height:8pt; border:solid red 1px;">Test</span>

我也尝试过：

<div style="white-space: pre-line; line-height: 5pt">
     <span style="line-height:5pt; border:solid red 1px; ">Test</span>
     <span style="line-height:5pt; border:solid blue 1px">Test</span>
</div>

边框用于演示线框的外边缘。 pt数字是任意的。我通常使用W3规格中推荐的无单位数字。

问题是：为什么字符上方和下方都有一点空间，无论行高设置为什么？如何删除？

图片（参见顶部红色＆＃34;测试＆＃34;框）：

谢谢。