行之间不需要的空间（html网格）[重复]答案

【问题标题】：Unwanted space between rows (html grid) [duplicate]行之间不需要的空间（html网格）[重复]
【发布时间】：2020-04-09 10:15:14
【问题描述】：

与此处相同的问题：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 css css-grid grid-layout display

【解决方案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>

【讨论】：