为什么用行高控制填充？

Question

我在meyerweb上浏览了这个页面:

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

我注意到对标题中的填充创建方式感到好奇:

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

现在,如果删除line-height指令,它会在顶部添加一点填充.因此,行高基本上起作用,以从h1的顶部移除一些填充.我的问题是:为什么不省略行高并将填充顶部从1em更改为.9em？

我意识到有很多方法可以在CSS中对猫进行换肤,但我认为像meyer这样的专家是这样做的,可能有一些选择的理由.

谢谢,约拿

Answer 1

使用小于1em的线高的原因实际上与顶部的间距无关,而是与底部边框和线的底部之间的空间无关.也许一个例子可以更好地说明这一点:http://www.jsfiddle.net/yijiang/tptbe/

正如您所看到的,使用默认的1em,该行略高于字母"p"和"g"的底部,但是使用0.8em时,字母会在字母"a"和"b"的正下方上升,这是一个位置,在美学上更令人愉悦