CSS line-height does not need a unit

In case you didn’t already know, the CSS property line-height does not need a unit. Eric Meyer explains the details in Unitless line-heights.

I knew about this, but I wasn’t quite aware of the difference between specifying a value and not. I did notice that I sometimes would get different results, but thought it had to do with browser quirkiness. Looks like I was wrong there.

Oh, a small tip: to avoid triggering a validation error when you specify line-height:1, use line-height:1.0 instead. Both are correct, but the CSS validator is buggy and doesn’t know that.

Posted on March 24, 2006 in CSS, Quicklinks

Comments

  1. March 24, 2006 by Richard Herrera

    Roger,

    It looks like the validator will be patched soon to allow line-height: x;:

    http://www.w3.org/Bugs/Public/show_bug.cgi?id=2272#c7

  2. March 24, 2006 by zcorpan

    Don’t change your stylesheet to satisfy a buggy validator. It’s like changing a correct article because some spell checker doesn’t know a particular word.

  3. March 24, 2006 by Roger Johansson (Author comment)

    Richard: Ah, great.

    zcorpan: Agreed. Changing 1 to 1.0 is just being a little bit more specific though, so in this case I don’t see it as a problem. But in general you are definitely correct.

  4. The W3C CSS validator is one of the most useless tools available. It’s not very well maintained and this is just one of it’s many bugs. The most effective and practical tool for checking CSS is Firefox’s console (since FF 1.5) which reports CSS syntax errors and unsupported properties and values. It’s far more accurate than the W3C CSS validator and more practical because it lets you know what is and is not support.

  5. It shouldn’t be…

    CSS line-height does not need a unit

    …but rather…

    “CSS line-height should not be given a unit”

    …as it is better to have the line-height calculated from the relevant text-line itself than from further up the chain - or “set in stone” with pixels.

    As for validation-tools: they are all a bit behind when it comes to standards, but useful as long as one is aware of the limitations.

  6. March 27, 2006 by Tommy Olsson

    @Georg: that depends. If you want ‘double spaced’ lines no matter what, use line-height:2 (or 2.0). But sometimes you want lines of text in two adjacent columns to line up, even though the text size differs. Then line-height:2em on the parent element can be more useful.

    This test document I made a year ago shows the difference when inheritance is involved. The left column has line-height set to ‘2’ and the right column has it set to ‘2em’. The child paragraphs have font-size:80%.

    You can’t say that unitless is always better. It depends on what you’re trying to achieve.

    As always, though, using fixed units (like px) is mostly a bad idea, just as it is for font size.

  7. @Tommy: You’re right of course. I know there are cases where an inherited line-height is the right thing.
    I tend to overlook those, since I rarely run into them.

    Also, I often wouldn’t notice when visiting other people’s sites, as my own ‘minimum font size setting’ (in Opera and Firefox) tend to blow up the font-size - thus also the line-height - and level out such differences. Made the two columns in your example look equal, so I had to change my preference in order to see them as you intended.

  8. omg. Did they finally fix this? When? was i sleeping?

  9. It’s true, they finally fixed it. Seems they updated the whole validator, and I guess my patch was in there as well.

    Check out: Unitless Line Heights Are Finally Valid

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.