H1 margin unexpectedly overflows container

Question

In the following snippet, why is the margin on the h1 overflowing the top of Console__Content?

There is plenty of space in Console__Content, I would expect h1 to be positioned so that I don't get the white band above the black rectangle.

What am I missing?

.Container {
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

.Console {
  height: 100%;
}

.Console__Content {
  font-family: monospace;
  color: #fff;
  background-color: black;
  width: 100%;
  height: 100%;
}

<div class="Container">
  <div class="Console">
    <div class="Console__Content">
      <h1>Test!</h1>
    </div>
  </div>
</div>