CSS：消除主體邊距

Question

我是網頁開發新手，在刪除正文邊距時遇到問題。

瀏覽器的最頂部和“徽標”文字之間有空間。我的程式碼位於 jsbin 上。

如果我想刪除空格，body { margin: 0;} 是否錯誤？

Answer 1

某些HTML 元素具有預先定義的邊距（即：body、h1 到h6、p、 >fieldset、form、ul、ol、dl、dir >、選單、區塊引用和dd）。

就您而言，是 h1 導致了您的問題。預設情況下它具有 { margin: .67em } 。如果將其設為 0，它將刪除空格。

要解決這類問題，我建議使用瀏覽器的 開發工具。對於大多數瀏覽器：右鍵單擊您想要了解更多資訊的元素，然後選擇「檢查元素」。在「樣式」標籤的最底部，您有一個 CSS 盒子模型。這是一個很好的工具，可以視覺化邊框、內邊距和邊距以及哪些元素是您的樣式問題的根源。

Answer 2

我想說，使用全域重置是解決這個問題的一個糟糕方法。

* {
  margin: 0;
  padding: 0;
}

h1邊距從父級彈出的原因是父級沒有內邊距。

如果在 h1 的父元素中新增內邊距，則邊距將位於父元素內部。

將所有內邊距和邊距重設為 0 可能會導致許多副作用。那麼最好刪除該特定標題的頁邊距。