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.
- Previous post: Win a copy of Getting Real
- Next post: Evaluating website accessibility part 3, Digging Deeper
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
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
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.
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.
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.
It shouldn't be...
...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.
@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.
@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.
omg. Did they finally fix this? When? was i sleeping?
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
Sorry, comments are closed for this post.