Html h1页边距顶部功能

我有两段类似的代码-

代码片段1-

<div class="section-2">
        <div class="about">
            <h1 style="text-align: center;margin-top: 50px;">ABOUT</h1>
            <hr style="height:5px;width:5%;border:none;color:#333;background-color:#333;" />
        </div>
</div>

关于

代码片段2-

<div class="section-3">
        <div class="projects">
            <h1 style="text-align: center;margin-top: 50px;">PROJECTS</h1>
            <hr style="height:5px;width:5%;border:none;color:#333;background-color:#333;" />
        </div>

</div>

项目

如您所见，h1标记的边距顶部样式在代码段2中不起作用。为什么会这样

---

注意：-没有对任何div应用css样式。

您可以通过两种方法使其正常工作，您只能获得与div相同宽度的边距，因此您可以将

.section-2

div和

.section-3

div设置为宽度

.section-2 {
  width: 250px;
  margin: 50px auto;
  border-top: 6px solid blue;
}

我不建议这样做，因为您的内容现在将被限制在它可以容纳的范围内，或者您可以创建一个css类，并将其称为top line或任何您想要的，然后只包含它，如下所示

<div class="section-2">
      <div class="about">
        <div class="top-Line"></div>
        <h1 style="text-align: center;">ABOUT</h1>
        <hr
          style="height:5px;width:5%;border:none;color:#333;background-color:#333;"
        />
      </div>
    </div>
    <div class="section-3">
      <div class="top-Line"></div>
      <div class="projects">
        <h1 style="text-align: center;">PROJECTS</h1>
        <hr
          style="height:5px;width:5%;border:none;color:#333;background-color:#333;"
        />
      </div>
    </div>

---

为了让它看起来像你想要的那样，我还从你的H1s上的HTML中删除了页边空白顶部

你可能想读一下关于页边空白折叠的内容：这是你所有的css吗？因为当我把这两个片段都放进去的时候，我甚至没有看到页面的顶部About@ShrewdStyle,顶行来自另一个没有边距底部属性的部分。所以这应该是所有的代码。

.top-Line {
  width: 250px;
  background-color: rgb(11, 143, 167);
  height: 6px;
  margin: 50px auto;
}