HTML，CSS＆amp;垂直文本边距

Question

这可能是基本的东西，所以如果有某种在线参考html文本＆amp;保证金有效，请给我一个链接。

无论如何，我在定义文本的精确边距时遇到了一些麻烦。下面是一个图像的示例，包含文本的div和div下面的更多文本。其他边距设置为0，div的边距为10px top＆amp;底部，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或simnilar软件中测量它来验证）。我正在寻找有关文本框大小和实际大小之间关系的信息，因此我可以正确定义边距。

Answer 1

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

Answer 2

我无法重现你的问题。您可以使用http://jsfiddle.net/重新创建有问题的情况与我们分享吗？

然而，您的CSS存在问题。你不应该在div上指定9px高度（由于边距，它至少高20px）。指定行高与字体大小无关，但两行文本之间的空格（不是你的情况）。

最后一件事：您用什么来衡量边距（16＆amp; 14px）？图像编辑器？你应该使用类似Firebug或chrome开发工具的东西。

Answer 3

Looks fine to me

在这里，我添加了一些背景，以便您可以看到方框的位置：http://jsfiddle.net/Eric/fcHZN/3/

盒子之间肯定存在10px的差距。看起来您的额外间距来自您的图片或Siirry文字，我们都没有CSS。