我的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

空格出现在css的以下规则中：

.lineheighttest {
    line-height:3em;
}

如果您想要设置规则，那么您可能想要在间隔上设置负边距。

Answer 2

您已经放置了类lineheighttest的css来设置行高3em.Remove，这样它就可以正常工作了。

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>

​