如何调整CSS使header区块中p标签文本与h1标题的间距缩小

你当前的间距问题主要来源于两个地方：

• 浏览器给h1标签默认设置的下外边距（margin-bottom），你仅给p标签设置了margin-top: 0，没有覆盖h1的默认下外边距，因此间距没有达到预期的紧凑效果
• 你HTML中header内部的四个<br>标签属于冗余代码，你已经通过h1的margin-top: 300px控制了顶部距离，这些<br>可以直接删除，避免影响布局

具体修改方案 #

1. 调整CSS属性 #

给.header h1选择器新增margin-bottom属性，数值可以根据你想要的紧凑程度调整，如果设置为0还不够小，可以设置负值进一步缩小间距；也可以同步调整line-height减少大字号文字自带的上下留白：

.header h1 {
    font-family: 'Baloo 2', cursive;
    font-size: 70px;
    color: #22223b;
    margin-top: 300px;
    padding-left: 60px;
    /* 新增以下两行，数值可按需调整 */
    margin-bottom: 4px;
    line-height: 1;
}

.header p {
    font-family: 'Baloo 2', cursive;
    font-size: 20px;
    color: #22223b;
    padding-left: 60px;
    margin-top: 0;
}

2. 清理冗余HTML代码 #

删掉header内h1标签前面的四个<br>标签，修改后HTML如下：

<div class="header">
    <h1>Summit</h1>
    <p>Climb the summit, then simply sum it</p>
</div>

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