如何使行高與字體高度匹配？

我已經盡我行高設置爲1em，但是，仍然有一定的空間和上面的字體（約3px的）以下：如何使行高與字體高度匹配？

enter image description here

如何設置的行高我網站是完全的字體高度？

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

HTML：

Hello, world!

CSS：

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

來源

2015-06-09 user4913694

這就是默認。行高始終等於其字體大小。我想你正在尋找'line-height：1'。 –

@minitech我希望line-height匹配字母的唯一原因是爲了讓我的邊距在CSS中更清晰（即「20px」或「25px」而不是「11px」或「17px」）。 – user4913694

@Mr_Green我可以做些什麼來增加字體的高度，即「H」？ – user4913694

-1

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

應該這樣做雅

來源

2015-06-09 02:55:44

請參考下面的示例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; 
}

希望這有助於。

來源

2015-06-09 02:56:51

上面還有3個像素和下面的字母：http://i.imgur.com/mq8LJaW.png – user4913694

你是對的。添加margin-top：-3px;實際上做了這項工作。最好的問候， –

我認爲你正在使用line-height: 1（沒有單位）正確的做法，如你的小提琴中所述。

如MDN指出：

所使用的值是無單位的這乘以元素的字體大小。計算出的值與指定的值相同。在大多數情況下，這是設置行高的首選方式，在繼承的情況下不會出現意外的結果。

Working Fiddle

來源

2015-06-09 02:57:47

即使使用'line-height：1'，字母上方和下方仍有3px的空間。 JSFiddle：http://jsfiddle.net/uovjzrn6/5/。圖片：http：//i.imgur.com/QlfHxIB.png。 – user4913694

@ user4913694該空間實際上是默認的。海事組織，刪除它是錯誤的。也許你正在用錯誤的方式解決問題。 –

如何使行高與字體高度匹配？

回答

相關問題