CSS问题：修改article外边距导致顶部固定导航栏下移，如何修复？

问题描述 #

自学HTML/CSS搭建首个网站，需求是顶部固定导航栏+居中article区域。但给article添加margin时，不仅article内容位移，顶部固定导航栏也跟着下移。之前用ul做导航栏没问题，改用div重构后出现该问题。

问题根源 #

1. 固定导航栏未锁定顶部：.topnav设置了position: fixed但未添加top: 0，它的初始位置仍依赖于正常文档流中的位置，当body因外边距折叠下移时，导航栏会同步位移。
2. 外边距折叠：article的margin-top与父元素main（无padding/border）、body发生外边距折叠，相当于给body添加了相同的margin值，间接影响了导航栏的初始位置。

修复方案 #

1. 锁定固定导航栏到视口顶部 #

给.topnav添加top: 0，彻底脱离文档流位置的影响：

.topnav {
  position: fixed;
  top: 0; /* 新增：强制固定在视口顶部 */
  width: 100%;
  background-color: #bfa485;
  margin: 0;
  color: #301f1a;
}

2. 阻止外边距折叠并避免内容被导航栏遮挡 #

给main添加padding-top，既阻止外边距折叠，又为固定导航栏留出空间（数值根据导航栏高度调整）：

main {
  padding-top: 60px; /* 留出导航栏高度的空间，同时打破外边距折叠 */
  overflow: auto; /* 可选：触发BFC，彻底杜绝外边距折叠问题 */
}

3. 调整article的间距（可选） #

如果需要给article添加上下间距，建议用padding替代margin，或者保留margin但此时因为main的padding-top已经打破折叠，不会再影响body：

article {
  text-align: center;
  /* 示例：用padding替代margin，避免折叠 */
  padding: 2em 0;
}

修改后的关键CSS片段 #

/* 重置样式部分保留 */

/* || typography */
body {
  overflow-x: auto;  
}

main {
  padding-top: 60px;
  overflow: auto;
}

article {
  text-align: center;
  padding: 2em 0; /* 可选的上下间距 */
}

.topnav {
  position: fixed;
  top: 0; /* 新增锁定顶部 */
  width: 100%;
  background-color: #bfa485;
  margin: 0;
  color: #301f1a;
}

/* 其余导航栏样式保留 */

内容的提问来源于stack exchange，提问作者dr_colossus