Как: как создать пробел / переместить переместить один div из последнего div, а не на страницу целиком

Question

Я хотел бы сделать пробел между последним div (id: content) margin-top: 10px, до самого последнего используемого div (обертка), а не всей страницы.

Проблема: он просто создает пространство между верхней частью страницы и содержимым, а не между этими 2 делениями.

Код:

  * {
  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;
}

Это добавит интервал между div с содержимым id и элементом nav (или div с оболочкой id).