Neden çizgi yüksekliği ile kontrol dolgu?

Question

Ben meyerweb anda bu sayfayı üzerinde gezen edildi:

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

ve ben başlığındaki dolgu oluşturulur şekilde merak şey fark: Eğer line-kaldırmak Şimdi eğer

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

yükseklik yönergesi, üstüne biraz dolgu ekler. Bu nedenle hat yüksekliği, esasen h1'in tepesinden bir miktar dolguyu çıkarmak için çalışır. Sorum şu: neden satır yüksekliğini dışarıda bırakmıyorsunuz ve padding-top'u 1em'den .9em'e değiştirmiyorsunuz?

CSS bir kediyi için birçok yol vardır farkındayım ama meyer gibi bir uzman bunu seçim için bazı nedeni muhtemelen orada bu şekilde yaparsa düşündüm.

sayesinde Jonah

Answer 1

1em daha küçük satır yüksekliği kullanılmasının nedeni aslında üstte boşluk ilgisi olmayan değil, daha ziyade alt sınır ve hattın altı arasındaki boşluktur. Belki bir örnek göstermek istiyorum bu daha iyi: sen ancak 0.8em ile, çizgi hafifçe harfleri 'p' ve 'g' dibine oturur 1em varsayılan ile görebileceğiniz gibi http://www.jsfiddle.net/yijiang/tptbe/

Harfler, "a" ve "b" harflerinin hemen altında, estetik açıdan daha tatmin edici bir pozisyon olan

Answer 2

hattına h1 alt kenarı arasındaki boşluk daha küçük hale getirmek için.

Answer 3

gibi Jeff'in üstteki dolguyu kaldırmaması gerektiği gibi, bu metin altındaki sınırın üst üste gelmesini sağlamak - Üzerinde marj veya dolgu yapmak, her iki yönde de aynı etkiye neden olmaz.