Why control padding with line-height?

Question

I was browsing this page over at meyerweb:

http://meyerweb.com/eric/css/edge/menus/demo.html

and I noticed something curious about the way the padding in the header is created:

h1 {margin: 0; padding: 1em 0.25em 0; font: bold 2.5em Arial, sans-serif; line-height: 0.8em; border-bottom: 1px solid silver; text-align: right; color: #557; letter-spacing: 2px;}

Now if you remove the line-height directive, it adds a little bit of padding to the top. So the line-height is functioning essentially to remove a bit of padding from the top of the h1. My question is: why not leave out line-height and change the padding-top from 1em to .9em?

I realize there are many ways to skin a cat in CSS, but I figured if an expert like meyer does it this way there is probably some reason for the choice.

Thanks, Jonah

Answer 1

The reason for using a line height smaller than 1em is not actually not related to the spacing on top, but rather the space between the bottom border and the bottom of the line. Perhaps an example would illustrate this better: http://www.jsfiddle.net/yijiang/tptbe/

As you can see, with the default 1em the line sits slightly above the bottom of the letters 'p' and 'g', but with 0.8em the letters are raised just below the letters 'a' and 'b', a position that is more aesthetically pleasing