导航栏与hero区块间存在多余空白间隙如何解决

你看到的导航栏和hero区块之间的空白，和flex/grid布局没有任何关系，是浏览器默认给<h1>标签添加的上外边距溢出父容器导致的：

• 浏览器内置User Agent样式默认给h1这类块级标题元素设置了上下外边距
• 父容器.hero没有触发BFC（块级格式化上下文），h1的顶部margin会“穿透”父容器，顶到上方的header元素，最终撑出你看到的空白间隙
• 你写的main { margin-top: none; }是无效CSS，margin属性不存在none取值，清零边距需要使用0作为值，这段代码本身不会生效，也不是问题的诱因。

选中页面h1元素查看浏览器默认样式，就能看到对应的margin值，就是这个属性制造了间隙：

二选一即可解决问题：

• 方法1：直接清除h1的默认外边距，最直接高效

h1 {
  font-size: 15vw;
  margin: 0; /* 清除浏览器默认的标题外边距 */
}

• 方法2：给hero容器触发BFC，把子元素的外边距限制在容器内部，不向外溢出

.hero {
  background-color: aqua;
  overflow: hidden; /* 触发BFC，包含内部子元素的外边距 */
}

CSS部分 #

body {
  font-family: sans-serif;
  margin: 0;
}

main {
  margin-top: none;
}


/*NAVIGATION BAR*/

header {
  height: fit-content;
}

.topnav {
  overflow: hidden;
  background-color: blueviolet;
}

.left {
  padding: 20px;
  float: left;
  width: 50%;
  box-sizing: border-box;
  text-decoration: none;
  text-align: left;
}

.right {
  padding: 20px;
  float: right;
  width: 50%;
  box-sizing: border-box;
  text-decoration: none;
  text-align: right;
}

@media screen and (max-width: 800px) {
  .left,
  .right {
    width: 100%;
  }
}


/*HERO BOX*/

.hero {
  background-color: aqua;
}

h1 {
  font-size: 15vw;
}

HTML部分 #

<header>
  <!--NAVIGATION BAR-->
  <nav>
    <div class="topnav">
      <div class="left">
        <a href="#Coupons">
          <p>Coupons!</p>
        </a>
      </div>
      <div class="right">
        <a href="#Order">
          <p>Order Online!</p>
        </a>
      </div>
    </div>
  </nav>
</header>
<main>
  <div class="hero">
    <h1>Super Restaurant!</h1>
    <button><a href="#menu">View our menu!</a></button>
  </div>
</main>

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