html - 如何: how to create space/move move one div from last div,不完全到页面

Question

我想在最后一个 div(id: content) margin-top:10px 到最后一个使用的 div(wrapper) 而不是整个页面之间留出空间。

问题:它只是在页面顶部和内容之间创建空间，而不是在这 2 个 div 之间。

代码:

  * {
  margin: 0px;
  padding: 0px;
}

nav {
  width: 100%;
  height: 80px;
  font-family: 'Quicksand', sans-serif;
  background-color: #7b2e1e;
  position: fixed;
  top: 0;
}

nav.add {
  background-color: #FFF;
}

#wrapper {
  width: 80%;
  height: 100%;
  margin: 0px auto;
}

ul {
  width: 55%;
  display: block;
  list-style: none;
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  text-align: right;

<!-- Navigationsbar -->
<nav>
  <div id="wrapper">
    <div class="logo">
      <h2> Navbar </h2>
    </div>

    <ul>
      <li><a href="#"> Home </a></li>
      <li><a href="#"> About </a></li>
      <li><a href="#"> Pricings </a></li>
      <li><a href="#"> Blog </a></li>
      <li><a href="#" class="exclusive"> Contact </a></li>
    </ul>

    <div id="toggle">
      <div id="one" class="line"> </div>
      <div id="two" class="line"> </div>
      <div id="third" class="line"> </div>
    </div>

  </div>
</nav>

<!-- Content -->
<div id="content">
  <main>

  </main>
</div>


<script src="script.js"></script>

它确实有效，但它在页面的最顶部和 div(内容)之间创建了空间，而不是 div(包装器)和内容之间的空间。

我该如何解决这个问题？

Answer 1

尝试使用以下代码:

#content {
     position: relative;
     width:70%;
     border: 1px solid red;
     height: 50vh;
     margin-top: 200px;
     margin-left: 5px;
     margin-bottom: 200px;
     margin-right: 5px;
}

它将在带有 id 内容的 div 和导航元素(或带有 id 包装器的 div)之间添加间距。