如何使线高匹配字体高度？

Question

我已尝试将行高设置为1em，但字体上方和下方仍有一些空格（约3px）：

如何将网站的行高设置为字体高度？

JSFiddle：http://jsfiddle.net/uovjzrn6/1/

HTML：

Hello, world!

CSS：

body {
    font-size: 18px;
    line-height: 1em;
}

Answer 1

我认为你正在使用你的小提琴中所述的line-height: 1（没有单位）做得对。

如MDN中所述：

  

使用的值是无单位乘以元素的字体大小。计算的值与指定的值相同。在大多数情况下，这是设置行高的首选方法，在继承的情况下没有意外结果。

Working Fiddle

Answer 2

请参阅以下示例div HTML5 / CSS3：

HTML

<div id = "sample">
    Hello, world!
</div>

CSS

body {
    font-size: 18px;
    padding:0;
    margin:0;
}
#sample
{
    height: 18px;
    line-height: 18px;
    background-color: #e0e0e0;
    margin-top:-3px;
}

希望这可能会有所帮助。

Answer 3

margin-top: 0px; margin-bottom: 0px;

那应该为你做