0

这可能是基本的东西，所以如果有一些关于 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 或类似软件中测量来验证）。我正在寻找有关文本框大小和实际大小之间关系的信息，以便我可以正确定义边距。

4

3 回答 3

2

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

于 2011-05-31T09:03:58.220 回答
0

在我看来很好

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

盒子之间肯定有 10px 的间隙。看起来您的额外间距来自您的图像或Siirry文本，我们都没有 CSS。

于 2011-05-31T09:19:16.183 回答
0

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

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

最后一件事：你用什么来测量边距（16 和 14 像素）？图像编辑器？您应该使用类似 Firebug 或 chrome 开发工具的工具。

于 2011-05-31T09:13:54.423 回答