Why does margin on H1 not space between parent div?

Question

I am making a basic header for a site and the margin of the H1 element is moving my heading section down.

I can set the margin to 0 on H1 but I'd rather understand why the margin of H1 isn't creating space with my top-nav div

html, body, .home {
  height: 100%;
  margin: 0;
}

h1{
  font-size: 72px;
  /* margin: 0;*/
}

.main-title{
  font-family: 'Pacifico', cursive;
  color: #b5b8c2;
}

.top-nav{
  height: 200px;
  background-color: #111a21;
}

<header class="home">
        <div class="top-nav">
          <h1><span class="main-title">My Title</span></h1>
        </div>
</header>

Why doesnt the H1 margin align to the top-nav div?

Answer 1

Because display: block will push the parent in margin. To fix this add display: inline-block or display: table; to the h1.

h1 {
 display: table;
}

Or you can remove the margin and add padding instead.

Answer 2

The margin of your h1 is outside its parent. You can force the parent to wrap the margin like this:

.top-nav {
    overflow: auto;
}