行之间不需要的 space（html 网格）

Question

与此处相同的问题：HTML divs grid - unwanted space between rows。我觉得还是没解决。

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

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

Undesired white space between rows

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

* {
  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>

在此先感谢您！ :-)

杰拉德

Answer 1

白色 space 的原因不是 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>

行之间不需要的 space（html 网格）

Unwanted space between rows (html grid)

html

css

grid-layout

css-grid

display