HTML Grid布局行间出现多余空白问题求助

嘿，我完全懂你现在的困扰！你遇到的这个多余空白其实不是Grid布局的锅，而是浏览器给<h1>和<p>这类块级元素自带的默认外边距（margin）在搞鬼。

问题根源 #

浏览器的默认样式表（User Agent Stylesheet）会给<h1>设置上下margin，<p>标签也有默认的上下margin。这些默认的外边距叠加在一起，就导致了标题和副标题之间出现了你不想看到的空白——哪怕你用Grid来布局，也不会自动清除这些元素自带的样式。

解决方案 #

要让它们默认紧密贴合，只需要手动重置这两个元素的margin为0就行，之后你可以根据自己的需求再设置间距：

方法1：精准重置目标元素的margin

在你的CSS里添加这段代码，只清除<h1>和副标题<p>的默认边距，不会影响其他元素：

h1, #subtitle {
  margin: 0;
}

方法2：全局重置所有元素的margin和padding（可选）

如果你希望彻底清除所有元素的默认边距，也可以修改你的全局样式（注意：这种方式会影响所有元素，后续需要给其他元素设置边距时要手动调整）：

* {
  box-sizing: border-box;
  border: 1px solid black;
  margin: 0;
  padding: 0;
}

修改后的完整代码示例 #

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

这样修改后，标题和副标题就会紧密贴合在一起，你之后可以通过给其中一个元素添加margin-top或margin-bottom来设置你想要的间距啦～

内容的提问来源于stack exchange，提问作者Gerard