为什么我的固定标题看起来有额外的顶部边距？

当我将其设置为固定时，为什么我的标题会向下移动？

在您的 Codepen 中，您将标题设置为固定，这意味着它将保留在向下滚动时的相同位置。然而，当您这样做时，标题顶部的边距似乎增加了。这是由边距折叠引起的。

什么是边距折叠？

边距折叠是一种 CSS 行为，它会折叠相邻块级元素的边距，例如您的标题及其下面的表格。当标题固定后，它就会从文档流中删除，并且表单将成为第一个流内元素。这会导致表单的上边距与正文的上边距折叠，从而导致出现更大的边距。

如何修复

处理此问题的两种常见方法是通过禁用边距折叠或为需要它的元素设置上边距值。

禁用边距折叠

要禁用边距折叠，请将 padding-top: 1px CSS 规则添加到 body 元素。这会强制浏览器保持正文的上边距。

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

设置上边距值

或者，向标题添加上边距。这将设置标题和视口顶部之间的距离：

#header {
  margin-top: 2rem;
}

以上是为什么我的固定标题看起来有额外的顶部边距？的详细内容。更多信息请关注PHP中文网其他相关文章！