如何：如何创建空间/移动从最后一个div移动一个div，而不是完全移动到页面

Posted 2021-04-10

我想在最后一个div（id：content）margin-top：10px，到最后一个div（包装器）而不是整个页面之间留出空间。

问题：它只是在页面顶部和内容之间创建空间，而不是在这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（包装器）和内容之间的空间。

我该如何解决这个问题？

答案

尝试使用以下代码：

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

它将在div与id内容和nav元素（或div与id包装器）之间添加间距。