為什麼我的固定標題看起來有額外的頂部邊距？

當我將其設為固定時，為什麼我的標題會向下移動？

在您的 Codepen 中，您將標題設為固定，這意味著它將保留在向下滾動時的相同位置。然而，當您這樣做時，標題頂部的邊距似乎增加了。這是由邊距折疊引起的。

什麼是邊距折疊？

邊距折疊是一種 CSS 行為，它會折疊相鄰區塊級元素的邊距，例如您的標題及其下面的表格。當標題固定後，它就會從文件流中刪除，並且表單將成為第一個流內元素。這會導致表單的上邊距與正文的上邊距折疊，從而導致出現更大的邊距。

如何修正

處理此問題的兩種常見方法是透過停用邊距折疊或為需要它的元素設定上邊距值。

停用邊距折疊

要停用邊距折疊，請將 padding-top: 1px CSS 規則新增至 body 元素。這會強制瀏覽器保持正文的上邊距。

body {
  padding-top: 1px; /* Disable margin-collapsing */
}

設定上邊距值

或者，向標題新增上邊距。這將設定標題和視窗頂部之間的距離：

#header {
  margin-top: 2rem;
}

以上是為什麼我的固定標題看起來有額外的頂部邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！