Line height with HTML5 doctype in IE9

Question

<!DOCTYPE html>
<html>
<body>
  <span style="font-size:48px">abc<br></span>
  <span style="font-size:6px">abc<br>abc</span>
</body>
</html>

Only when I use HTML5 doctype, IE9 puts additional margins around the lines. Adding font-size:0 or line-height:0 on   has no effect.

How can I get rid of those margins?

Use a CSS reset, like the HTML5 reset. http://stackoverflow.com/questions/3485720/which-html5-reset-css-do-you-use-and-why — Chris, Oct 24 '12 at 16:11
Your question is unclear. Are you asking why there is so much vertical space between the second and third line? — Andrew, Oct 24 '12 at 16:30
Try open the document with and without doctype. There's so much vertical space between all three lines with HTML5 doctype. — alice, Oct 24 '12 at 16:35

score 4 · Accepted Answer · answered Oct 24 '12 at 18:14

Different browsers handle this differently, but I'm not sure what would be the right approach. My gut feeling says IE does this right, while Firefox gets it wrong. (Can't check with other browsers right now, sorry.)

The   in the span makes the span two lines high, and since it has a font size of 48px, the baseline of the second half is 48 pixels down from the first half. And that's where the second span starts; it continues on the same baseline.

If you want to avoid that, don't aligns the spans to the baselines, align them to the top, by putting

<style>span {vertical-align:top}</style>

in your HTML (in the head). That way, the text in the second span will flush with the top of the line instead of the baseline.

enter image description here

Thanks for the detailed explanation. You're explanation seems to be right. But I think this is not intuitive behavior to most people. — alice, Oct 25 '12 at 17:16

score 0 · Answer 2 · answered Oct 24 '12 at 16:19

Without me testing your problem myself, I will ask have you tried giving the breaks negative margins? E.g.

<br style="margin-top:-3px" />

I'm not sure which way you're having problems with the  

But my other question for you is why are you using  directly in the body? Based on your example I suggest the following, instead (although I still don't know 100% what you are trying to accomplish):

<!DOCTYPE html>
<html>
<body>
    <h1>abc</h1>
    <p>abc</p>
    <p>abc</p>
</body>
</html>

Then in your CSS you can give the <h1> and  your font sizes, line-heights etc that you need.

h1 {
    font-size:48px;
    margin-bottom:0;
}

Also, font-size:6px; is really small and going to be very hard to read for anyone. Occasionally certain browsers or devices won't even render a font size that small, but instead they may render it as font-size:10px; instead, automatically. I suggest at minimum 12px for body text, preferably a little larger still.

Negative margins has no effect. I intentionally gave extremely small and large font-size so that you can see the problem clearly. Sure, I can write different markups to achieve the result that I want. But this is really a basic markup. I can't believe IE9 doesn't display this simple markup correctly. — alice, Oct 24 '12 at 17:25

Line height with HTML5 doctype in IE9

2 Answers2