CODEWITHSUNDEEP
htmlcsstextfontstypography
ubershmekel
ubershmekel

Reputation: 12798

Why is the div bigger than the font-size?

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

The following html appears as 20 pixels tall in Firefox31 and Chrome36 on Windows7. I expected it to be 16 pixels tall.

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

Notice the bottom of the p is cut off when you limit the div's height to 16px. That suggests to me there's unused space above the text. It might be a problem with vertical alignment. But then how would I go about preventing that issue when I want to precisely control the height and alignment of the text?

Upvotes: 8

Views: 8636

Answers (3)

Hashem Qolami
Hashem Qolami

Reputation: 99464

This is because the default line-height value that is applied by the user agent. Some of web browsers apply a line-height of 1.2em or 1.2 or 120% to the elements while the spec recommends:

We recommend a used value for normal between 1.0 to 1.2.

CSS Level 2 Spec states:

line-height

On a block container element whose content is composed of inline-level elements, line-height specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties.

The accepted values are normal | <number> | <length> | <percentage> | inherit

Hence, you could override the applied value by adding a line-height of 16px or simply a value of 100% or 1em or 1 to the element. (Click on each one to see the demo).

<number> - e.g. line-height: 1 - is the preferred value of line-height as it always refers to the element's font size. Therefore you don't have to specify different values for different font sizes.

For further info about the difference between these values, you could refer to my answer here:

Upvotes: 12

Chad
Chad

Reputation: 1549

The div size is not 20px because the font-size is larger than 20px when you have letters that hang below the baseline (such a p and q). If you want the div itself to be of height 20px, just set the div css to 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 />

Upvotes: 1

Gabriele Prestifilippo
Gabriele Prestifilippo

Reputation: 180

Maybe you need line-height: 16px;

Upvotes: 1

Related Questions