HTML、CSS 和垂直文本边距

Question

这可能是基本的东西，所以如果有某种关于 html 文本和边距如何工作的在线引用，请给我一个链接。

无论如何，我在为文本定义准确的边距时遇到了一些麻烦。下面是一个图像示例，一个包含其下方文本的 div 以及位于该 div 下方的更多文本。其他边距设置为 0，div 的边距为 10px 顶部和底部，0 左侧和右侧。由于我不知道的原因，结果是顶部 16px，底部 14px。我可以用边距定义来补偿错误，但实际上我想知道发生了什么，而不是治疗症状。

<img src="images/temp/img.png" />
<div><p>Testing</p></div>
<h2>Siirry</h2>

div 的样式是

div {
    color:#f00;
    text-transform:uppercase;
    font-size:9px;
    line-height:9px;
    height:9px;
    margin:10px 0;
    overflow:hidden;
}

示例图片:

编辑:

更多信息，因为我的观点显然没有很清楚地表达出来:根据 Firebug 等工具，边距为 10px。那不是我要问的。然而，由于字体的呈现方式，文本框实际上比文本的实际大小要大。这会导致 VISUAL 边距大于定义的边距(您可以通过在 Photoshop 或类似软件中测量来验证)。我正在寻找有关文本框大小和实际大小之间关系的信息，以便我可以正确定义边距。

Answer 1

那是因为字体没有使用整个高度。更好(虽然可能不完美)的指示是选择文本并检查黑色边框和突出显示的矩形之间的边距。这也适用于“测试”下方的文本。它将占据这 14px 的一部分。