元素之間的空白，未知來源

Question

問題解決了

在底部，在頁面的最后一個元素和頁腳之間，有一個空白區域，我正在嘗試使用Chrome開發工具來跟蹤它的來源，但顯然它不是由最后一個元素和頁腳引起的。

女巫的唯一元素似乎是空間的來源，就是身體。 我已經取消了body元素的任何邊距或填充：

html,body {
margin: 0;
width: 100%;
padding: 0;
}

僅使用Chrome測試網站的兼容性

Answer 1

這是因為標題的默認邊距：

footer h4 {
  margin: 0;
  padding: 1em 0;
}

當您使用開發工具檢查h4元素時，這一點很明顯。

Answer 2

它是由頁腳內部h4的邊距引起的。 collapsing margins解釋了這種現象：

邊距在相鄰元素之間折疊。 簡單來說，這意味着對於正常文檔流中的相鄰垂直塊級元素，只有具有最大邊距值的元素的邊距將被遵循，而具有較小邊距值的元素的邊距將被折疊為零。