css - 为什么要用行高控制padding？

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 指令，它会在顶部添加一点填充。所以 line-height 的作用本质上是从 h1 的顶部移除一些填充。我的问题是:为什么不省略行高并将 padding-top 从 1em 更改为 .9em？

我知道有很多方法可以在 CSS 中给猫蒙皮，但我想如果像迈耶这样的专家这样做的话，可能有一些选择的理由。

谢谢，约拿

Answer 1

之所以使用小于1em的行高其实并不是和top的间距无关，而是bottom border和line bottom之间的间距。也许一个例子可以更好地说明这一点:http://www.jsfiddle.net/yijiang/tptbe/

如您所见，在默认 1em 的情况下，线条略高于字母“p”和“g”的底部，但在 0.8em 的情况下，字母会在字母“a”和“b”的下方凸起，一个更美观的位置