Why is the div larger than the font size?
See http://jsfiddle.net/6taruf65/1/
The following html renders as 20px on Firefox31 and Chrome36 on Windows7. I expected it to be 16 pixels.
<style>
* { margin: 0; padding: 0; border: 0; overflow: hidden; vertical-align: baseline; }
</style>
<div style="font-size: 16px;">help 16px</div>
Note that the bottom is p
disabled when you limit the div's height to 16px. This tells me this wasted space above the text. This could be a vertical alignment issue. But how can I prevent this problem when I want to precisely control the height and alignment of the text?
source to share
This is due to the fact that the default value line-height
that is applied by the user agent. Some web browsers apply to elements line-height
from 1.2em
either 1.2
or 120%
, and the spec recommends :
We recommend using a value
normal
between 1.0 and 1.2.
CSS Level 2 Difficulty:
In a block container element whose content is composed of inline-level elements, the elements
line-height
specify the minimum line- height of the lines within the element. The minimum height consists of the minimum height above the baseline and the minimum depth below it, just as if each line starts on a zero-width line using the element's font and line-height property.
Accepted values: normal | <number> | <length> | <percentage> | inherit
Therefore, you can override the applied value by adding line-height
from 16px
or just the value or or to the element. (Click on each one to see a demo). 100%
1em
1
<number>
- eg. line-height: 1
is the preferred value line-height
because it always refers to the element's font size. Therefore, you don't need to specify different values for different font sizes.
For more information on the difference between these values, you can refer to my answer here:
source to share
The div size is not 20px because the font size is larger than 20px when you have letters hovering below the baseline (such as p and q). If you want the div itself to be 20px high, just set the div css to height: 20px.
<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 />
source to share