Dlaczego kontrolować dopełnienie o wysokości linii?

Question

byłem przeglądania tej strony na co meyerweb:

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

i zauważyłem coś dziwnego w sposobie wyściółka w nagłówku jest Utworzono:

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;} 

Teraz jeśli usunąć line- wysokość, dodaje trochę dopełnienia do góry. Zatem wysokość linii działa zasadniczo w celu usunięcia odrobiny wypełnienia od góry h1. Moje pytanie brzmi: dlaczego nie zostawić linii wysokości i zmienić padding-top z 1em na .9em?

Zdaję sobie sprawę, że istnieje wiele sposobów na skostnienie kota w CSS, ale pomyślałem, że jeśli ekspert taki jak meyer robi to w ten sposób, prawdopodobnie istnieje ku temu powód.

Dzięki Jonasz

Answer 1

Powód użycia wysokości linii mniejszej niż 1em nie jest w rzeczywistości związany z odstępem na górze, ale raczej odstępem między dolną krawędzią a dolną krawędzią linii. Być przykładem byłoby lepiej to zilustrować: http://www.jsfiddle.net/yijiang/tptbe/

Jak widać, z domyślnym 1em linia znajduje się nieznacznie powyżej dolnej części litery „P” i „g”, ale z 0.8em na litery są podnoszone tuż pod literami "a" i "b", pozycja bardziej estetyczna

Answer 2

Aby szczelina pomiędzy dolną krawędzią H1 do linii stają się coraz mniejsze.

Answer 3

Tak jak powiedział Jeff, nie chodzi o to, aby usunąć górną wyściółkę, ale aby tekst nałożył się nieco na krawędź poniżej niej - zmiana marginesu lub wypełnienia na nim, w obu kierunkach nie spowodowałby tego samego efektu.