Why are my header and main sections separated by white space?

Question

I am trying to create a hero box but my herobox and navbar have white space inbetween. I can not get rid of it! I am guesing it has to do with flexbox and/or grid but i'm not sure.

I colored the nav purple and the herobox blue to try to figure why they don't follow each other. I tried messing with the margin and display in CSS.

Chrome inspection of elements:

My code so far:

body {
  font-family: sans-serif;
  margin: 0;
}

main {
  margin-top: none;
}


/*NAVIGATION BAR*/

header {
  height: fit-content;
}

.topnav {
  overflow: hidden;
  background-color: blueviolet;
}

.left {
  padding: 20px;
  float: left;
  width: 50%;
  box-sizing: border-box;
  text-decoration: none;
  text-align: left;
}

.right {
  padding: 20px;
  float: right;
  width: 50%;
  box-sizing: border-box;
  text-decoration: none;
  text-align: right;
}

@media screen and (max-width: 800px) {
  .left,
  .right {
    width: 100%;
    /* The width is 100%, when the viewport is 800px or smaller */
  }
}


/*HERO BOX*/

.hero {
  background-color: aqua;
}

h1 {
  font-size: 15vw;
}

<header>
  <!--NAVIGATION BAR-->
  <nav>
    <div class="topnav">
      <div class="left">
        <a href="#Coupons">
          <p>Coupons!</p>
        </a>
      </div>
      <div class="right">
        <a href="#Order">
          <p>Order Online!</p>
        </a>
      </div>
    </div>
  </nav>
</header>
<main>
  <div class="hero">
    <h1>Super Restaurant!</h1>
    <button><a href="#menu">View our menu!</a></button>
  </div>
</main>

score 2 · Answer 1 · answered Jun 22 '22 at 17:54

Solution

Set the h1 to margin-top: 0.

Explanation

The h1 has a margin-top that is creating the space with the header section.

This is happening because, even though the h1 is a descendant of the main element, its top margin is superseding the top margins of its ancestors (.hero and main).

And this is happening because of the rules of margin collapsing.

§ 8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.

Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse, except [in certain cases].

Horizontal margins never collapse.

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

score 0 · Answer 2 · answered Jun 22 '22 at 17:43

0

It appears that the margin top on the header is causing the problem. try giving it a margin of 0 and giving it padding if you need and see what happens


h1 {
  font-size: 15vw;
  margin-top: 0;
}

answered Jun 22 '22 at 17:43

Caleb

572
1
7
25

score 0 · Answer 3 · answered Jun 22 '22 at 18:02

Extra margin is from h1 (commented in code, info here). Useful snippet for making completely own styling:

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Removes all margins and padding and also makes all elements same box-sizing.

Also, for example, re-create nav using grid styles, try to avoid float in positioning of elements, its intended for positioning images in text or etc.

body {
  font-family: sans-serif;
  margin: 0;
}

main {
  margin-top: none;
}

/*NAVIGATION BAR*/

header {
  height: fit-content;
}

.topnav {
  overflow: hidden;
  background-color: blueviolet;
  display:grid;
  grid-template-columns:1fr 1fr;
}

.left {
  padding: 20px;
  place-self: center start;
  box-sizing: border-box;
  text-decoration: none;
}

.right {
  padding: 20px;
  place-self: center end;
  box-sizing: border-box;
  text-decoration: none;
  text-align: right;
}

@media screen and (max-width: 800px) {
  .topnav{
    grid-template-columns:1fr;
  }
}

/*HERO BOX*/
.hero {
  background-color: aqua;
}

h1 {
  font-size: 15vw;
  margin-top:0; /* fix */
}

<header>
    <!--NAVIGATION BAR-->
    <nav>
      <div class="topnav">
      <div class="left">
          <a href="#Coupons"><p>Coupons!</p></a>
      </div>
      <div class="right">
          <a href="#Order"><p>Order Online!</p></a>
      </div>
      </div>
    </nav>
  </header>
  <main>
    <div class="hero">
      <h1>Super Restaurant!</h1>
      <button><a href="#menu">View our menu!</a></button>
    </div>
  </main>

Why are my header and main sections separated by white space?

3 Answers3

Solution

Explanation