如何避免在文本上方添加额外的填充？

Question

我的文本框中有一些填充，我想消除。请考虑以下HTML：

<div>I am testing text. Hello WORLD.</div>

和CSS：

div {
    font-size: 20px;
    line-height: 1;
    background: lightgreen;
}

结果在框内文本上方的一些填充：http://i.imgur.com/UMiC2BH.png

正如您所看到的，在文本顶部正上方，有几个像素的填充，我似乎无法摆脱。我可以做些什么来消除填充（最好没有硬编码的调整值）？

此问题的代码位于：http://jsfiddle.net/TL7VC/

Answer 1

没有填充。 padding属性的初始值为0，并且padding的{​​{1}}没有理由为非零，除非您这样设置。

当文本设置为实心，即div时，行高等于字体的高度，这与字体的大小相同。大多数字符的高度小于字体的高度。粗略地说，字体的高度可以容纳所有字符，包括上下字符和上下文字母变音符号，如Å，Ê和j。 （详细说明，您可能会看到某些字符甚至可能会延伸到字体高度以上，具体取决于字体。）

您可以尝试通过将line-height: 1设置为小于1的值（例如0.8）来调整此值。然后你可能会看到例如“H”作为彩色区域的顶部。但这取决于字体，因为字体设计师决定如何根据字体大小放置字符。

Answer 2

这不是填充，而是字体的高度。放一些像这样的大字符

↑ ░ ↓

到行看看没有填充

Answer 3

将margin:0px和padding:0px;添加到您的身体。这是fiddle