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

我的文本框里面有一些填充，我想消除。考虑下面的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/

来源

2013-11-01 Timothy Armstrong

这就是你指的......？ http://jsfiddle.net/qQEPQ/否则，我没有看到任何填充。 –

没有填充。 padding属性的初始值为0，并且没有理由为什么padding对于div将不为零，除非您如此设置。

当文本设置为固定值时，即line-height: 1，行高等于字体的高度，这与字体的大小相同。大多数字符的高度小于字体的高度。粗略地说，字体的高度可容纳所有的字符，包括具有上升和下降以及上下的变音符号的字符，如Å，Ê和j。（详细看，你可能会发现一些字符甚至可能会扩展到高于字体高度，这取决于字体。）

你可以尝试通过将line-height设置为小于1的值来进行调整，说0.8。那么你可能会看到例如“H”作为彩色区域的顶部toucjing。但是这取决于字体，因为字体设计师决定字体与字体大小的关系如何。

来源

2013-11-01 21:42:55

这不是一个填充，但字体的高度。把一些大的人物像这样

↑ ░ ↓

到行，看看有没有填充

来源

2013-11-01 21:30:35 paka

添加margin:0px和padding:0px;你的身体。这里是fiddle

来源

2013-11-01 21:40:11

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

回答

相关问题