html - 标题元素中文本周围的空间

Question

我一直在使用 Firebug 检查标题元素，并注意到标题容器没有包含其包含的文本，即使我没有设置填充也是如此。

<h2>test</h2>

http://jsfiddle.net/BTwk6/

上下间距大于左右间距，结果是我的h2在它的containing box里没有正对。

这正常吗？无论如何让 h2 框拥抱它的文本？

谢谢

Answer 1

是的，这很正常，事情本该如此。如果你例如在标题元素上设置边框，您会看到标题文本中的字符通常不会触及边框。

这有两个原因。首先，字体的高度是一个设计概念，并不(通常)对应于任何字母的高度；大写字母上方和文本基线下方都有空白。在某些设计中，像“j”或“g”这样的后降字母可能会到达字体的底部，而像“Ê”这样的变音符号可能会到达顶部，甚至超出它。

其次，通常在一行的上方和下方会有一些前导，通常占字体高度的 15-20%。默认值取决于字体(和浏览器)。实际上，这意味着提高可读性并防止字符接触上一行或下一行的字符。

行距是通过设置 line-height 间接设置的，因为 line-height 设置的是字体高度(字体大小)和行距之和的总高度。通过设置 line-height: 1，您将行距设置为零；这在排版中被称为“setting solid”，它可以适用于孤立的线条，比如单行标题。但是仍然存在由提到的第一个原因引起的间距，即“内置”到字体中的间距。您甚至可以将 line-height 设置为较小的值，例如 0.85，使行距为负数。请注意，如果使用的字体与您在页面上建议的字体不同，这可能会导致字符垂直截断。