How to: how to create space/move move one div from last div, not to the page entirely

Question

I would like to make space between the last div(id: content) margin-top:10px, to very last div used(wrapper) not the entire page.

Problem: it just creates space between top of the page and the content, not between this 2 divs.

Code:

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

It does work, but it creates space between very top of the Page and the div(content), not the space between div(wrapper) and the content.

How do i solve this issue?

Answer 1

Try using following code:

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

It will add spacing between div with id content and the nav element(or div with id wrapper).