h1元素會導致滾動條出現。任何人都能解釋我爲什麼？css：margin-top會導致滾動條
html, body {
margin: 0;
padding: 0;
height: 100%;
}
header {
height:10%;
}
section {
height:90%;
}<header>
<h1>
Hello
</h1>
</header>
<section>
test
</section>這是因爲
h1有一些垂直邊距在默認情況下，通常0.67em。h1上邊距摺疊height從不包括所述邊緣區域的高度由於h1崩塌上邊距，它的行爲象餘量屬於header代替h1。由於h1的內容高度爲10%，因此其總高度將爲calc(10% + 0.67em)。
這就是爲什麼會有溢出。
如果您刪除頂部邊距，但保留底部邊距，則沒有問題，因爲底部邊緣不會摺疊，這是由於非。從Collapsing margins，
兩個利潤率鄰接如果[...]都屬於垂直相鄰 框邊，[...例如]
- 一個盒子，它首先在流動兒童的頂邊
- 後進流子的底部邊緣和底部 保證金其父如果家長有
auto計算高度的上邊距。
所以你可以做任何下列
h1的上邊距的box-sizing: margin-box的CSS工作組。它可能會被拒絕。因爲h1帶有一個餘量，由default style sheet施加。
當您在代碼中將此邊距（通常爲和margin-bottom: .67em）添加到height: 100%時，這會超過視口高度，啓動垂直滾動條。
給h1 a margin: 0。
無論您使用box-sizing: content-box還是border-box，邊距空間將始終添加到您的height聲明中。
如果要在不添加高度的情況下在h1附近添加空格，請使用填充而不是邊距，以及box-sizing: border-box。以下是一些實施選項：https://css-tricks.com/box-sizing/
*
{
margin:0px auto;
}
html, body {
margin: 0 ;
padding: 0;
height: 100%;
}
header {
height:10%;
}
section {
height:90%;
}<header>
<h1>
Hello
</h1>
</header>
<section>
test
</section>只需添加通用選擇，使保證金*{margin:0px auto;}。希望它會工作
* {margin：0; } 是正確的。 –
@AliMottaghiPour它是一個很好的做法，使用'* {margin：0px auto'，'auto'來讓瀏覽器計算邊距 – Sampad
用於重置css，您必須使用* {margin：0; } –
塊級元素中的h1標記有一些餘量。
* {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header {
height:10%;
}
section {<header>
<h1>
Hello
</h1>
</header>
<section>
test
</section>爲了除去這種類型的額外餘量和填充的，建議以重置所有元素margin和padding爲0
這可以通過進行
這實際上是最好的答案。但有些問題：如果我只有一個帶有邊距的元素，邊緣如何崩潰？其次，您在建議中建議哪種解決方案？ – Matthew
我提到'margin-bottom'，因爲在很多（大多數？）情況下，會有'h1'下面的元素。我假設的問題提供了一個非常簡化的例子。在實際使用中，「margin-bottom」可能會產生影響。但我同意在這種情況下只有'margin-top'很重要。 –
@Mthethew如果你不需要保證金，我會刪除它。否則，我會使用'h1 {display：inline-block}'或類似的命令來防止邊距崩潰。 – Oriol