Why does HTML5 ignore line-height smaller than font-size?_问答_开发者

Why does HTML5 ignore line-height smaller than font-size?

开发者 https://www.devze.com 2023-02-11 13:35 出处：网络

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

相关专题：css

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 w开发者_StackOverflow社区ant, 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!

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.

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>

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.

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>