Why adjust the gasket with line height?

Question

I looked at this page on meyerweb:

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

and I noticed something curious about how the addition is created in the header:

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 bit of padding to the top. Thus, the line height functions essentially to remove padding bits from the top of h1. My question is: why not leave the height line and change the top from 1em to .9em?

I understand that there are many ways to throw a cat in CSS, but I decided that if an expert like Mayer does this, there is probably a reason for choosing.

Thank you Jonah

Answer 1

The reason for using line heights shorter than 1em is actually not related to the spacing above, but the space between the bottom border and the bottom of the line. Perhaps an example illustrates this better: http://www.jsfiddle.net/yijiang/tptbe/

As you can see, by default, the 1em line lies slightly above the letters "p" and "g", but with 0.8 characters the letters rise just below the letters "a" and "b", a position that is more aesthetically pleasing

Answer 2

To make the gap between the lower edge of h1 on the line, it becomes smaller.

Answer 3

As Jeff said, this is not to remove the upper registration, so that the text slightly overlaps the border below - changing the margin or indentation on it in any direction will not cause the same effect.