我的标题被包含在我的主要标签中答案

【问题标题】：My Header is Being Included As Part of my Main tag我的标题被包含在我的主要标签中
【发布时间】：2019-09-27 17:46:59
【问题描述】：

当我将页边距应用于我的主要标签以试图让它出现在标题下方时，它会将整个页面向下移动，而不仅仅是主要部分。为什么主要部分没有出现在标题下方？

我尝试过使用 div 以及语义 HTML 标签。

body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #222;
}

header {
  text-align: center;
  width: 100%;
}

header h1 {
  float: left;
}

nav {
  margin: 25px 25px;
  float: left;
}

nav ul {
  margin: -17px 0 0 15px;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  padding: 5px;
}

nav ul li a {
  text-decoration: none;
}

.nav-button {
  float: right;
  margin-top: 10px;
  margin-right: 5px;
}

.nav-button a {
  color: #fff;
  text-decoration: none;
}

main {
  margin-top: 20px;
}

.container {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.banner {
  margin-top: 50px;
}

<body>
  <header>
    <h1>Website Title</h1>
    <nav>
      <ul>
        <li class="navbar-item"><a href="#">Nav Item</a></li>
        <li class="navbar-item"><a href="#">Nav Item</a></li>
        <li class="navbar-item"><a href="#">Nav Item</a></li>
      </ul>
    </nav>
    <button class="button-primary nav-button"><a href="#">Button</a></button>
  </header>
  <main>
    <div class="container">
      <div class="banner">
        <h1>Welcome to A Website</h1>
        <p>Simple subheading</p>
      </div>
    </div>
  </main>
</body>

我期待主要部分，例如包含<h1>Welcome to A Website</h1> 和<p>Simple subheading</p> 的横幅

显示在标题部分下方，但显示在 h1/nav 和按钮的中心。对横幅或容器应用 Margin 会导致包括页眉在内的整个页面向下移动。

【问题讨论】：

标签： html css header main

【解决方案1】：

我认为原因是你的标题标签内的元素比它的容器大。

因此，您可以尝试以下替代方案：

尝试 1：

给你的 header 一个特定的高度，以便 main div 可以低于它：

header
{
 height: 110px ; /* Approx */
}

尝试 2：

将margin-top 添加到main 标记

 main
{
 margin-top: 7% ; /* Approx */
}

这可能会给你预期的结果。

【讨论】：

应用标题高度似乎有效。感谢您的帮助。