0

我一直在使用 firebug 检查标题元素，并注意到标题容器不会拥抱其包含的文本，即使我没有设置填充。

<h2>test</h2>

http://jsfiddle.net/BTwk6/

上下间距大于左右间距，结果是我的h2没有正对着它的容纳框。

这是正常的吗？反正有没有让 h2 框拥抱它的文本？

谢谢

4

4 回答 4

2

尝试调整 line-height 属性，默认情况下，不同的字体在它们上方和下方有不同的空间。您可能无法完全解决此问题。例如，这个词

Tempura

比这个词高很多

mum

但是“妈妈”这个词的上下线高度仍必须与“天妇罗”相同。

于 2012-06-06T23:11:15.170 回答
2

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

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

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

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

于 2012-06-07T05:18:17.470 回答
0

默认情况下，h2 元素的顶部和底部边距为 19px。尝试重置它

于 2012-06-06T21:32:16.350 回答
0

尝试重置边距和填充：

h2{margin:0;padding:0}

用您自己的值替换 0 ...

咪咪

于 2012-06-06T21:34:27.657 回答