31


i'm switching some pages over to HTML5 which contains headlines that need to be set with a really small line height. Now since <!DOCTYPE html> any line-height below the font-size is ignored. I can space them out all I want, but no chance bringing them closer together. Anyone know why that is and if it's cureable?
Thanks, thomas

Edit: Found it. My old markup was <a style="line-height:12px;" href="#">something</a> which worked in XHTML 1.0 transitional but not in HTML5.
I changed it to <div style="line-height:12px;"><a href="#">something</a> an that works!
Thanks!

thomas
  • 2,297
  • 2
  • 22
  • 23
  • 4
    Are you sure a non-HTML5 doctype doesn't trigger the same behavior? – BoltClock Feb 16 '11 at 09:25
  • I'm pretty sure this also depends on the browser and isn't a general behaviour of HTML5. – Nick Feb 16 '11 at 09:27
  • How are you setting your line-height? (And which browser are you using?) – Matt Gibson Feb 16 '11 at 09:49
  • As soon as I remove the HTML5 Doctype (or replace it with XHTML 1.0 Transitional) my line-height is applied correctly. It is specified in the stylesheet and tested on Chrome and Firefox on Linux and Mac. – thomas Feb 16 '11 at 13:34

4 Answers4

62

Your <a> tag is an inline element and it appears in HTML5 inline elements defer to its parent 'block' element's line-height ( or all the way up to the <body> style if that is the immediate parent ).

Example:

body { line-height:20px; } 
a { line-height:12px; }

and this markup:

<body>
    <a href="#">test</a>
</body>

The <a> tag will have a line-height of 20px not 12px.

So your 'inline' <a style="line-height:12px;" href="#">something</a> didn't work but did when you wrapped it in the 'block'-level <div> element because block elements can dictate line-height.

A better way than bloating your markup by wrapping your inline element in a block element, just use CSS to make the tag display 'inline-block'.

<a style="display:inline-block; line-height:12px;" href="#">something</a>

Even better, give your <a> a class (change 'xx' below to something semantic):

<a class="xx" href="#">something</a>

Then in your CSS file set that class to 'inline-block':

.xx { display:inline-block; line-height:12px; }

Hope that helps.

ucsarge
  • 1,260
  • 11
  • 10
  • 2
    A really nice catch. Can you please explain, why this `inline-height` is ignored when it's smaller then parent's value, unless child element has `displa: inline-block'? – Johnny_D Oct 06 '13 at 14:24
  • I'd also be interested to know, especially as it doesn't appear to ignore it completely, only when the line height is less than the font size. – Chris Oct 28 '13 at 11:31
2

Do you have some code? Do you have some extraneous padding or margins?

This works for me in Firefox, Chrome, and IE8

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
Emily
  • 9,926
  • 4
  • 31
  • 39
1

In my understanding, every block-level element has a width-0 character called "strut". It will participate in the calculation of line box's height. When the children's line-height is smaller than parent's,It looks like the children's line-height is ignored because parent's line-height will hold up the line box when the children's line-height is smaller.

xwchris
  • 11
  • 1
0

You need to use em as big text size in IE8 and IE7 will not share the same line height...e.g. using 30px font-size:

This example shows that with a 30px text size the line height in IE7 and IE8 are not on par with Chrome and FF. 

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

This example shows using em all browsers display the same line height.em is an old system though we need to use it until IE8 and below dies out. It's good practise. 

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
frontsideup
  • 2,833
  • 1
  • 21
  • 23