爲什麼div大於字體大小？

請參閱http://jsfiddle.net/6taruf65/1/爲什麼div大於字體大小？

以下html在Firefox7和Windows7上顯示爲20像素高。我預計它是16像素高。

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

注意，當您限制div的高度，以16像素的p的底部被切斷。這表明我的文字上方有未使用的空間。這可能是垂直對齊的問題。但是，當我想要精確控制文本的高度和對齊時，我該如何着手解決這個問題？

來源

2014-09-01 ubershmekel

添加'的line-height：16px'修復它。不過，更普遍的解決方案是使用'line-height：1em'。 – 2014-09-01 20:29:42

這是因爲用戶代理應用的默認line-height值。一些web瀏覽器應用的1.2em或1.2或120%一個line-height，同時規範recommends的元素：

我們建議normal 1.0〜1.2使用的值。

CSS級別2規格規定：

line-height

在一個塊容器元素，其含量是由內嵌級元件，line-height指定線的最小高度元素內的框。最小高度由基線上方的最小高度以及其下方的最小深度組成，就好像每個線框以帶有元素字體和線條高度屬性的零寬度內聯框開始。

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

因此，可以通過添加一個16pxline-height或簡單地向元件的100%或1em或1值重寫的應用價值。 （點擊每一個看演示）。

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

有關這些值之間的差異進一步的信息，你可以參考我的答案在這裏：

Calculate line-height with font in rem-value

來源

2014-09-01 20:30:14

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

來源

2014-09-01 20:30:41

DIV的大小不爲20px，因爲當字母掛在基線以下時（例如ap和q），字體大小大於20px。如果你想讓div本身的高度爲20px，只需將div設置爲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 />

來源

2014-09-01 20:33:47 Chad

爲什麼div大於字體大小？

回答

相關問題