html - div 和文本之间的神秘差距是什么？

Question

在添加文本时，DIV 的顶部和底部之间存在较大间隙，我遇到了一些麻烦。看起来是文本的计算高度，但为什么会超出这么多？理想情况下，我需要它尽可能与边界齐平。

我创建了一个简单的 fiddle 来演示 http://jsfiddle.net/XFqq5/3/

CSS

#text {
 display: inline-block;
 font-size: 70px;
 border: 1px solid red;
 line-height: 1;
}

HTML

<div id="text">test</div>

Answer 1

它是以下内容的组合:

• 您没有使用字体中最高或最低的字形(键入一个大写字母和一个带有下标的字母，例如 g 或 y)并且
• 没有规定字形必须拉伸(stretch)字体的整个高度