如何调整存在外边距塌陷的body元素位置

没问题，直接上几个简单有效的办法，任选其一就能解决：

• 给body加个透明顶部边框，直接打破外边距塌陷：

  body {
    border-top: 1px solid transparent;
  }
  

  这个操作不会影响页面视觉布局，但能让body的边界回到正常位置，避免和子元素的外边距重叠，getBoundingClientRect()的检测结果也会恢复正确。

• 触发body的BFC（块格式化上下文），阻止外边距传递：

  body {
    overflow: auto;
  }
  

  这个方法不需要额外添加边框或内边距，同样能解决问题，适合不想修改盒模型的场景。

• 给body设置极小的顶部内边距：

  body {
    padding-top: 0.1px;
  }
  

  这个值足够小，几乎不会对布局产生影响，但能切断子元素和body之间的外边距关联。

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