爲什麼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代替。