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;
}

如果您想放置该规则，那么您可能希望在spacer上设置负余量。

Answer 2

您已将 lineheighttest 的css设置为行高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>

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

3 个答案: