How to get rid of gap between divs

Question

I currently have two divs above each other and I have both of their margin and padding set to zero and the body's margin and padding set to 0 as well.

Here is my code:

body{
  margin: 0;
  padding: 0;
}

.navbar--darkmode {
  display: flex;
  gap: var(--gap, 1rem);
  padding: 1.5em;
  background-color: #152028;
}

.navbar--darkmode>.logo {
  display: inline;
  margin-block: auto;
  margin: 0;
  padding: 0;
  font-family: 'Fira Mono', monospace;
  font-weight: 500;
  font-size: larger;
  color: white;
}

.nav-link--darkmode {
  color: white;
  text-decoration: inherit;
  font-family: 'Fira Mono', monospace;
  margin-right: 1em;
}

.primary-navigation {
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-navigation>li {
  display: inline;
}

.primary-header {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  position: relative;
}

.page {
  margin: 0;
  padding: 0;
  position: fixed;
}

.page--darkmode {
  margin: 0;
  padding: 0;
  width: auto;
  height: 100vh;
  background-color: #282434;
}

<div class="primary-header navbar--darkmode">
  <h1 class="logo">NAME GOES HERE</h1>
  <nav>
    <ul class="primary-navigation">
      <li>
        <a class="nav-link--darkmode" href="/">Home</a>
      </li>
      <li>
        <a class="nav-link--darkmode" href="/about">About</a>
      </li>
      <li>
        <a class="nav-link--darkmode" href="/projects">Projects</a>
      </li>
      <li>
        <button></button>
      </li>
    </ul>
  </nav>
</div>

<div class="page--darkmode">
  <h1>hi</h1>
</div>

I'm not too sure whats causing this gap because when I inspect element there's nothing there that's causing this gap so am I missing something or is there an element that's force creating a new line that I'm not aware of? Thanks!

Edit: Fixed css to be more accurate to css file I have

Your h1 is causing the problem with it's `margin-block` css. Remove the css or add `margin-block: auto;` to the `h1` element — Lee Taylor, Jul 27 '22 at 22:37
Time to get to know the tools inbuilt into the browser. Right-click on the H1 element and select "inspect" which shows all the styles that apply to the element. Browser default and otherwise. The Browser Developer tools are very powerful at debugging this kind of issue. — Jon P, Jul 27 '22 at 23:08

score 0 · Answer 1 · answered Jul 27 '22 at 23:17

The H1 element is pushing your .page--darkmode div down. It's one of the funny things about CSS margins that children can push their parents around like that.

Fixing it can be as simple as zeroing the margin on your H1. In the below snippet I've added a rule to do just that.

body{
  margin: 0;
  padding: 0;
}

.navbar--darkmode {
  display: flex;
  gap: var(--gap, 1rem);
  padding: 1.5em;
  background-color: #152028;
}

.navbar--darkmode>.logo {
  display: inline;
  margin-block: auto;
  margin: 0;
  padding: 0;
  font-family: 'Fira Mono', monospace;
  font-weight: 500;
  font-size: larger;
  color: white;
}

.nav-link--darkmode {
  color: white;
  text-decoration: inherit;
  font-family: 'Fira Mono', monospace;
  margin-right: 1em;
}

.primary-navigation {
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-navigation>li {
  display: inline;
}

.primary-header {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  position: relative;
}

.page {
  margin: 0;
  padding: 0;
  position: fixed;
}

.page--darkmode {
  margin: 0;
  padding: 0;
  width: auto;
  height: 100vh;
  background-color: #282434;
}

   .page--darkmode h1{
    margin-top:0px;
 }

<div class="primary-header navbar--darkmode">
  <h1 class="logo">NAME GOES HERE</h1>
  <nav>
    <ul class="primary-navigation">
      <li>
        <a class="nav-link--darkmode" href="/">Home</a>
      </li>
      <li>
        <a class="nav-link--darkmode" href="/about">About</a>
      </li>
      <li>
        <a class="nav-link--darkmode" href="/projects">Projects</a>
      </li>
      <li>
        <button></button>
      </li>
    </ul>
  </nav>
</div>

<div class="page--darkmode">
  <h1>hi</h1>
</div>

How to get rid of gap between divs

1 Answers1