H1标题与P文本间距过大的原因及缩小方法咨询

H1和P标签之间间距过大的核心原因是浏览器默认样式：

• 所有H系列标题（包括H1）默认带有margin-bottom
• P标签默认带有margin-top
  这两个外边距会发生外边距折叠，最终表现为两者间距等于两个外边距中较大的那个，导致视觉上间距过大。你给P标签设置的line-height: 0只影响文本行内的间距，对块级元素的外边距没有作用。

以下几种方式都可以缩小这个间距：

方法1：移除H1的底部外边距 #

直接在H1的行内样式中添加margin-bottom: 0：

<h1 style="font-size:50px; margin-bottom: 0;">Aetherian's Portfolio</h1>
<p style="line-height: 0;">Discord: Aetherian#6664</p>

方法2：移除P的顶部外边距 #

在P标签的行内样式中添加margin-top: 0：

<h1 style="font-size:50px;">Aetherian's Portfolio</h1>
<p style="line-height: 0; margin-top: 0;">Discord: Aetherian#6664</p>

方法3：全局重置默认外边距（推荐） #

如果后续页面还有其他元素不想受默认样式影响，可以在全局CSS中重置所有元素的默认外边距和内边距，避免重复处理：

* {
  font-family: "TypoRoundRegular";
  margin: 0;
  padding: 0;
}

这样所有元素的默认外边距和内边距都会被清除，你可以根据需要单独设置间距，更灵活可控。

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