First time visitor? The tutorials start here.

CSS line-height property

Attributes for the “line-height” property may be defined in em or px for web pages, although em is better because it is relative to the font-size.

For printing on paper, you could use pt, mm, cm, or in.

Think of line-height as the distance between two lines on a sheet of lined notebook paper.

Example, using 3em line-height:

Text

I chose 3em for that example, because it beautifully illustrates the size of 1em, as 3em = 3 letter heights.

Examples of ways you can use it in your CSS:

body { line-height: 1.5em; }
#container { line-height: 1.5em; }
.box { line-height: 2em; }
#sidebar p { line-height: 1.75em; }

These numbers are arbitrary. Choose what looks best on your page.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (4)

pastor rickMay 9th, 2009 at 11:48 pm

Hey, you forgot the ex! The only thing it is good for (imho) is moving/styling text above and below the normal line-height to create super/sub-scripts but still…

LesaMay 10th, 2009 at 3:32 pm

I’m sorry, you lost me there. The ex?

The (x)HTML tags <sup> and <sub> are used for superscript and subscript.

pastor rickMay 11th, 2009 at 1:32 am

The em is the height of the letter M’s font while the ex is the height of the letter x’s font. The results can prove very dramatic (width-wise) in the box model depending on which font (or font family) is being used by the site.

The (x)HTML tags are good if being used for fixed mark-ups limited to superscripts 1, 2 and 3 but some browsers will not recognize superscripts beyond that which makes it much easier to create the CSS class using the ex measurement to simulate the sup/sub-script like this:

.sup {vertical-align:0;position:relative;bottom:1.2ex;font-style:normal;font-size:65%;}

instead of fighting the HTML code with hacks to simulate the effect (especially with mathematical formulas)…

LesaMay 11th, 2009 at 7:16 pm

I don’t know anyone who uses ‘ex’ measurements, and for good reason. They’re just too inconsistent from font to font, and I don’t know why it was even invented in the first place.

As for <sup> and <sub>, why not just style the <sup> and <sub> tags themselves, instead of creating class names? <sup> and <sub> aren’t just used for visual presentation. They actually mean something, so the proper coding technique is to use those tags when you are denoting superscript and subscript. How would artificial intelligence know the difference between H2O and H2O, if the 2 doesn’t have the specific markup that classifies it as subscript?

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.