为什么我的 class=hero 框之间和之后有空白？答案

【问题标题】：Why does my class=hero box have white space in between and after?为什么我的 class=hero 框之间和之后有空白？
【发布时间】：2022-06-23 01:43:38
【问题描述】：

我正在尝试创建一个英雄框，但我的英雄框和导航栏之间有空白。我无法摆脱它！我猜它与 flexbox 和/或网格有关，但我不确定。

我将导航设为紫色和 herobox 蓝色以试图弄清楚他们为什么不互相关注。我尝试在 CSS 中弄乱边距和显示。

Chrome 检查元素：

到目前为止我的代码：

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%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

/*HERO BOX*/
.hero {
  background-color: aqua;
}

h1 {
  font-size: 15vw;
}

<body>
  <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>

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

似乎是页眉顶部的边距导致了问题。尝试给它一个 0 的边距并在需要时给它填充，看看会发生什么


h1 {
  font-size: 15vw;
  margin-top: 0;
}

【讨论】：