为什么H1上的保证金不是父div之间的空间？

Question

我正在为网站制作一个基本标题，H1元素的边距正在向我的标题部分移动。

我可以在0上将保证金设置为H1，但我更理解为什么H1的保证金不会在top-nav创建空间} div

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为什么H1页边距不与top-nav div对齐？

Answer 1

因为display: block会将父级推到边距。 要解决此问题，请将display: inline-block或display: table;添加到h1。

h1 {
 display: table;
}

或者您可以删除margin并添加padding。

Answer 2

你的h1的边距在父母之外。您可以强制父项包装边距，如下所示：

.top-nav {
    overflow: auto;
}