html - 如何避免文本上方的额外填充？

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/

score 2 · Accepted Answer

没有填充。该padding属性的初始值为 0，没有理由padding为div非零，除非你这样设置。

当文本设置为实心时，即line-height: 1行高等于字体的高度，与字体的大小相同。大多数字符的高度小于字体的高度。粗略地讲，字体的高度可以容纳所有字符，包括上下有升序和降序以及变音符号的字符，例如 Å、Ê 和 j。（仔细观察，您可能会看到某些字符甚至可能超出字体高度，具体取决于字体。）

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

score 1 · Accepted Answer

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

↑ ░ ↓

到行看有没有填充

score 0 · Accepted Answer

0

添加margin:0px和padding:0px; 到你的身体。这是小提琴

于 2013-11-01T21:40:11.893 回答

3 回答 3