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

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

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

回答

相關問題