为什么H1上的margin不是父div之间的空格？

Question

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

我可以设置保证金0上H1但我宁愿理解为什么H1保证金不符合我top-navdiv

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>

创造空间为什么犯规的H1保证金对齐到top-navdiv？

Answer 1

您的h1的边距超出其父项。您可以强制父包有此余地：

.top-nav { 
    overflow: auto; 
} 

Answer 2

由于display: block会将保证金中的父母推入。 要解决此问题，请将display: inline-block或display: table;添加到h1。

h1 { 
display: table; 
} 

或者你可以删除margin并添加padding代替。