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

Question

我一直在使用firebug检查一个header元素，并注意到标题容器没有拥抱它包含的文本，即使我没有填充集。

<h2>test</h2>

http://jsfiddle.net/BTwk6/

顶部和底部的间距大于左侧和右侧的间距，结果是我的h2不能正好位于其包含的框中。

这是正常的吗？反正有没有让h2盒子拥抱它的文字？

由于

Answer 1

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

Tempura

比

这个词高很多

mum

但是'妈妈'这个词仍然必须与'天妇罗'在线上下相同。

Answer 2

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

这有两个原因。首先，字体的高度是一个设计概念，并且（通常）不对应任何字母的高度;在大写字母之上以及在文本基线之下都有空白空间。这样的“J”或“G”的下伸可能，在一些设计中，达到该字体的底部，和类似的“E”的区分标记可能达到顶部，或者甚至超越它。

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

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

Answer 3

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

Answer 4

尝试重置边距和填充：

h2{margin:0;padding:0}

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

mimiz