為什么div大於字體大小？

Question

見http://jsfiddle.net/6taruf65/1/

以下html在Firefox31和Windows7上的Chrome36中顯示為20像素高。 我預計它高16像素。

<style>
* { margin: 0; padding: 0; border: 0; overflow: hidden; vertical-align: baseline; }
</style>
<div style="font-size: 16px;">help 16px</div>

請注意，當您將div的高度限制為16px時， p的底部會被切斷。 這對我來說，文本上方還有未使用的空間。 這可能是垂直對齊的問題。 但是，當我想精確控制文本的高度和對齊時，我將如何防止這個問題呢？

Answer 1

這是因為用戶代理應用的默認line-height 。 某些Web瀏覽器對元素應用line-height 1.2em或1.2或120% ，而規范建議 ：

我們建議normal使用值在1.0到1.2之間。

CSS Level 2規范說明：

line-height

在內容由內聯級元素組成的塊容器元素上， line-height指定元素中行框的最小高度 。 最小高度包括基線上方的最小高度和其下方的最小深度，就像每個線框以零寬度內聯框開頭一樣，其中包含元素的字體和線高屬性。

接受的值是normal | <number> | <length> | <percentage> | inherit normal | <number> | <length> | <percentage> | inherit

因此，您可以通過向元素添加16px的line-height或100%或1em或1的值來覆蓋應用的值。 （單擊每個以查看演示） 。

<number> -例如line-height: 1 -是優選值line-height ，因為它總是指元素的字體大小。 因此，您不必為不同的字體大小指定不同的值。

有關這些值之間差異的更多信息，請參閱我的答案：

• 使用rem-value中的字體計算行高

Answer 2

div大小不是20px，因為當字母大小低於基線時（例如ap和q），字體大小大於20px。 如果你想讓div本身的高度為20px，只需將div css設置為height：20px。

的jsfiddle

<div style="height: 20px; font-size: 20px; border:1px solid #444;">help 20px (with cut off text)</div>
<br />
<div style="height: 23px; font-size: 20px; border:1px solid #444;">help 20px (without cut off text)</div>
<br />

Answer 3

也許你需要line-height: 16px;