Home/ Questions/Q 7673315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T16:29:03+00:00

i’m switching some pages over to HTML5 which contains headlines that need to be

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0