行之间的多余空间（HTML网格）

Question

与这里的问题相同：HTML divs grid - unwanted space between rows。我认为它仍未解决。

我不熟悉HTML（遵循FreeCodeCamp课程），并且正在尝试创建我的第一个网页。>>

我想使用网格显示来排列元素，但是我似乎不了解其行为。我不明白为什么我的行（标题和副标题）之间有空白-用红色标记。]

Undesired white space between rows

没有任何额外的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>

非常感谢您！ ：-）

杰拉德

与此处相同：HTML div网格-行之间的多余空间。我认为仍然没有解决。我不熟悉HTML（遵循FreeCodeCamp课程），并且正在尝试创建我的第一个网页。我...

Answer 1

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