HTML、CSS 和垂直文本边距答案

【问题标题】：HTML, CSS & Vertical text marginsHTML、CSS 和垂直文本边距
【发布时间】：2011-05-31 08:59:49
【问题描述】：

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

【问题讨论】：

标签： html css text margins

【解决方案1】：

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

【讨论】：

是的，这就是我的问题的意思。我想了解其背后的基础知识，以便我可以更稳健地为包含不同字体大小的文本设置准确的边距。
您已经设置了精确的边距。字母和行首之间的空间无法在 CSS 中确定，因为这是您正在使用的字体的属性，甚至可以在字体版本之间有所不同，更不用说同一字体中的不同字符了！您应该设计行高，而不是字体。如果出于特定原因，您需要从字母测量精确的像素，您确实应该在绘图工具中测量该距离并在您的 CSS 中进行相应的调整。但我认为这应该是个例外。
在这种情况下，您应该测量字母顶部和行顶部之间的距离（如果选择文本，您可以看到最好的距离）。然后，从您想要的边距中减去您测量的像素数量。因此，如果从“H”顶部到选择顶部的距离为 3px，并且您希望边距为 10px，则应将边距设置为 7px。如果这是两行之间的边距，您应该从“j”的底部到选择的底部进行类似的测量。然后，从原始 10px 中减去两个找到的值，以获得您需要的实际边距。
是的，谢谢。我想那我得用手动方法了。

【解决方案2】：

我无法重现您的问题。您能否通过http://jsfiddle.net/ 重现问题情况并与我们分享？

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

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

【讨论】：

是的，根据萤火虫等的说法，边距是 10px。我用 Photoshop 来测量它，因为我需要文本和图像的确切顶部之间的空间正好是 10px，而不是浏览器认为的任何值是 10 像素。文本框通常比字符的实际大小要大。

【解决方案3】：

Looks fine to me

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

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

【讨论】：

如果你把它截屏并在 Photoshop 中比较文本和框之间的空间，你会发现空间实际上不是 10px。