我的 h1 标签中的额外空间来自哪里？

Question

我很难弄清楚我的 h1 标签中多余的空间是从哪里来的。我已将 CSS 填充和边距重置为 0，并将行高设置为与字体大小相同，并且我希望文本在标签内的上方或下方没有空间，并且垂直居中（冗余，但至少垂直居中，上下空间最小......最多几个像素）。

这是我的html：

    <h1>THIS IS A TEST</h1>

这是我的 CSS：

    h1 {
    margin:0;
    padding:0;
    background-color:#FC9;
    font-size:3em;
    text-transform:uppercase;
    line-height:3em;
    }

Here is a fiddle illustrating the issue

我做错了什么？有什么明显的吗？ （对不起，如果是这样）。

我花了几个小时试图解决这个问题，因为它在更大的设计中弄乱了我的布局。

提前感谢任何人提供的任何帮助。

Answer 1

您已将 lineheighttest 类的 css 设置为 行高 3em。删除它就可以正常工作了。

Answer 2

空格是从这个css规则中出现的：

.lineheighttest {
    line-height:3em;
}

如果您想使用该规则，那么您可能想在垫片上设置负边距。

Answer 3

解释：

当你设置 font-size 为 font-size:3em;您将其设置为正文字体大小的 3 倍。

当您将 H1 行的行高设置为 3em 时，您将其设置为字体大小的 3 倍。

h1 {
	margin:0;
	padding:0;
	background-color:#FC9;
	font-size:3em;
text-transform:uppercase;
font-family: 'Khula', sans-serif;
font-weight:300;
vertical-align:middle;
}

.lineheighttest {
    line-height:.75em;
    padding-top:2px;
}

.spacer {
    height:30px;
    background-color:#6BC7D0;
}

<h1>THIS IS A TEST</h1>

<div class="spacer"></div>

<h1 class="lineheighttest" >THIS IS A TEST</h1>