行之间不需要的空间(html网格)

Question

与这里相同的问题：HTMLdiv网格-行之间不需要的空间。我认为它仍然没有解决。

我是HTML的新手(遵循FreeCodeCamp课程(，我正在尝试创建我的第一个网页。

我想使用网格显示来排列元素，但我似乎不理解它的行为。我不明白为什么我的行(标题和副标题(之间有空格——用红色标记——。

不希望的行之间空白

如果没有任何额外的CSS，我希望我的h1从网格的顶部开始，然后我的id="subtitle"被粘贴在它之后。然后有了一些CSS，我可以在两者之间添加所需的空间。

* {
box-sizing: border-box;
border: 1px solid black;
}
body {
background-color: #fff;
}
header {
font-family: gotu;
}
.grid-header {
display: grid;
justify-items: center;
}
h1 {
font-size: 8vw;
font-weight: bold;
}
#subtitle {
font-size: 3vw;
}

<header class="grid-header" id="title">
<h1>Hayao Miyazaki</h1>
<p id="subtitle">Father of two sons and modern anime.</p>
</header>

提前非常感谢！：-(

Gerard

Answer 1

空白的原因不是CSS网格规范的错误，而是因为浏览器默认样式表中存在的<h1>和<p>元素上有空白。如果您在浏览器的开发工具中检查该元素，您将看到您的用户代理默认样式表已经为这些元素应用了边距。

使用margin: 0将页边距重置为0将解决您的问题。这也是为什么CSS重置几乎出现在你遇到的每一个样板中的原因：删除有意见的浏览器特定默认样式。

* {
box-sizing: border-box;
border: 1px solid black;
}
body {
background-color: #fff;
}
header {
font-family: gotu;
}
.grid-header {
display: grid;
justify-items: center;
}
h1 {
font-size: 8vw;
font-weight: bold;
margin: 0;
}
#subtitle {
font-size: 3vw;
margin: 0;
}

<header class="grid-header" id="title">
<h1>Hayao Miyazaki</h1>
<p id="subtitle">Father of two sons and modern anime.</p>
</header>