如何消除 HTML Body 元素周圍不必要的空白？

消除 Body 元素周圍的預設空白

使用 HTML 和 CSS 時，您可能會在元素周圍遇到不必要的空白。此空格可能是由套用於

的預設 CSS 樣式引起的。

預設邊距

預設情況下，

元素的所有邊都有 8px 的邊距。此邊距在內容和瀏覽器視窗邊緣之間創建了間隙。若要刪除此邊距，請將以下樣式加入 CSS 中：

body {
  margin: 0;
}

這會將正文邊距重設為 0，消除多餘的空間。

全域 CSS 重設

或者，您可以使用全域 CSS 重設來刪除所有 HTML 元素的所有預設樣式。這是一種常用技術，用於建立一致且可預測的網站樣式起點。

一種流行的全域重置是Nicolas Gallagher 的「標準化」樣式表：

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

此重設刪除所有元素的邊距和填充，包括

選擇性重設

如果您只需要重設特定元素的樣式，則可以使用更有針對性的選擇器。例如，以下 CSS 將從

中刪除邊距和填滿。元素及其所有子元素：

body,
body > * {
  margin: 0;
  padding: 0;
}

結論

透過從

中刪除預設邊距；元素或應用全域CSS 重置，您可以消除不必要的空白並確保您的內容在瀏覽器視窗中按預期對齊。請記住徹底測試您的更改，以確保它們不會破壞您網站的功能或外觀。

以上是如何消除 HTML Body 元素周圍不必要的空白？的詳細內容。更多資訊請關注PHP中文網其他相關文章！