H1边缘意外溢出容器

Question

在以下代码段中，为什么h1上的边距溢出Console__Content的顶部？

Console__Content中有足够的空间，我希望定位h1，以便我不会在黑色矩形上方获得白色条带。

我错过了什么？

.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>