使用margin时元素不应移动整个容器

Question

我有以下带有HTML的CSS：

body {
  margin: 0;
}

header {
  background: #ccc;
  width: 80%;
  margin: 0 auto;
}

header .header-container {
  padding: 20px;
}

header ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

header li {
  display: inline;
  padding: 0 15px;
}

.mainbox {
  background: #eee;
  width: 80%;
  margin: 0 auto;
  height: 700px;
}

.childbox {
  background: #ddd;
  height: 100%;
  width: 90%;
  margin: 0 auto;
}

.childbox h1 {
  margin: 10px;
}

<header>
  <div class="header-container">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</header>
<div class="mainbox">
  <div class="childbox">
    <h1>Hello World</h1>
  </div>
</div>

现在的问题是h1元素将其容器向下压，因为它有一个空白。如何仅在容器内应用此边距，以免整个容器向下移动？