Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
<!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 <br> has no effect.
How can I get rid of those margins?
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
<br>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
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.