ansaurus

Question

Answer 1

+3 A:

Try changing line-height to 1.5

K Prime 2010-01-11 08:48:35

Oh,seems working.Why?What's the difference?

2010-01-11 08:51:09

`line-height: 150%` will make it 1.5 times whatever the line-height of the `div` is, and fix it for the children as well, despite the children's `font-size` being bigger. `line-height: 1.5` means it'll be 1.5 times of the whatever each element's `font-size` is - for your example, the `line-height` of the span is `2.4 * 1.5 * <font-size of div>`

K Prime 2010-01-11 09:40:11

K Prime is correct. Also, see http://stackoverflow.com/questions/2040788/whats-the-difference-between-line-height1-5-and-line-height150-in-css/2040799#2040799

Mathias Bynens 2010-01-11 09:57:11

Answer 2

+1 A:

This is your original code:

<div style="line-height: 150%;">
 <span style="display: block; font-size: 240%;">Test</span>
</div>

This sets the line-height of all the elements inside the div to 150%. This percentage is relative to their computed font size. The span inherits the font-size of the div, and the line-height is calculated based on that. You set the font-size of the span to 24 times its inherited size, but the line-height is unaffected.

In short: line-height: 150% will take 150% of the element’s computed font size to compute the line height, which is equivalent to multiply it by 1.5.

As mentioned, using line-height: 1.5; instead fixes that behavior:

<div style="line-height: 1.5;">
 <span style="display: block; font-size: 240%;">Test</span>
</div>

This triggers the recalculation of the line-height based on the new font size. It sets the line-height of all the elements inside the div to 1.5 times. This percentage is relative to their actual font size. The span inherits the font-size of the div. You set the font-size of the span to 2.4 times its inherited size, and the new line-height is calculated based on that.

In short: line-height: 1.5 (without units) will multiply the element’s actual font size by 1.5 to compute the line height.

Mathias Bynens 2010-01-11 09:49:52

But isn't the `span`'s computed font size 150% already?

2010-01-11 09:58:49

Nope. Its computed `line-height` is `150%`, but its `font-size` is just inherited (`100%`), then reset to `240%`. `240%` (`font-size`) > `150%` (`line-height`) — that’s why, in this case, you should use the dynamic `line-height: 1.5` instead of the static `line-height: 150%`. [Terminology courtesy of K Prime ;)]

Mathias Bynens 2010-01-11 10:28:18

ansaurus

tags:

views:

answers:

How to fix this kind of problem?

related questions