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

Question

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.

Leave a Comment Cancel reply