HTML，CSS和垂直文本边距

这可能是基本的东西，所以如果有某种HTML文本&边距工作的在线参考，请给我一个链接。HTML，CSS和垂直文本边距

无论如何，我在定义文本的确切边距时遇到了一些麻烦。下面是一个图像的例子，一个包含它下面的文本的div和div下的更多文本。其他边距设置为0，div的边距为10px top & bottom，0 left & right。由于我未知的原因，结果是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; 
}

示例图片：

Example

编辑：

更多信息，因为我的观点没有明显出来很显然：保证金是10px根据到Firebug等工具。这不是我要问的。但是，由于字体呈现的方式，文本框实际上大于文本的实际大小。这会导致VISUAL边距大于定义的边距（您可以通过在Photoshop或相似软件中对其进行测量来进行验证）。我正在寻找关于文本框大小和实际大小之间关系的信息，所以我可以正确定义边距。

来源

2011-05-31 teel

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

来源

2011-05-31 09:03:58 GolezTrol

是的，这就是我的意思与我的问题。我想了解背后的基础知识，以便我可以更强有力地为包含不同字体大小的文本设置精确的边距。 – teel 2011-05-31 11:54:24

您已经设置了精确的边距。字母和行首之间的空格不能在CSS中确定，因为这是您正在使用的字体的属性，甚至可能因字体版本而异，更不用说同一字体中的不同字符！你应该设计行高，而不是字体。如果出于特定原因，您需要从字母中测量确切的像素，则应该确实在绘图工具中测量该距离，并在CSS中进行相应调整。但我认为这应该是一个例外。 – GolezTrol 2011-05-31 16:40:46

在这种情况下，您应该测量字母的顶部和行的顶部之间的距离（如果文本被选中，您可以看到最佳的距离）。然后，从您想要的边距中减去您测量的像素数量。所以，如果从'H'的顶部到选择顶部的距离是3px，并且您希望边距为10px，则应该将边距设置为7px。如果这是两行之间的余量，则应从'j'的底部到选择的底部进行类似的测量。然后，从原来的10px中减去两个找到的值，以获得您需要的实际边距。 – GolezTrol 2011-05-31 16:47:33

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

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

最后一件事：您用什么来衡量边距（16 & 14px）？一个图像编辑器？你应该使用像Firebug或chrome开发工具。

来源

2011-05-31 09:13:54 solendil

是的，根据萤火虫等，边距是10px。我用Photoshop来测量它，因为我需要文本和图像的确切顶部之间的空间恰好为10px，而不是浏览器认为是10px。文本框通常大于字符的实际大小。 – teel 2011-05-31 11:44:23

Looks fine to me

这里，我添加了一些背景，所以你能看到的箱子去：http://jsfiddle.net/Eric/fcHZN/3/

肯定有框之间的差距10px的。看起来您的额外间距来自您的图片或Siirry文本，我们也没有CSS。

来源

2011-05-31 09:19:16 Eric

如果您截取了该图片并比较了Photoshop中文本和框之间的空格，则会看到该空间实际上不是10px。 – teel 2011-05-31 11:46:30

HTML，CSS和垂直文本边距

回答

相关问题