我一直在纠结一些调试和寻找解决方案，我在React中构建了一个页面，每个concomponent都是一个接一个（section下的section，一个长页面）
我的App.jsx看起来像这样：

return (
    <>
      <Header handleClickShow={handleClickShow}/>
      <Nav />
      <About />
      <Experience />
      <Portfolio />
      <Contact />
      <Footer />
     {showGame && <Game />}
    </>
  );

我的indes.js是下一个：

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.querySelector("#root")
);

一些组件有一个section标签（不管里面是什么），index.css里面的那个section有margin

section {
    margin-top: 8rem;
}

所以，我有8 rem空间结束后的每一个组件.我的组件是显示只有当我按下按钮.问题是，当我没有游戏显示我有8 rem额外的空间下页脚.我不明白为什么它不消失.所以当游戏不存在我的组件是隐藏的，但它仍然留下8 rem的空间，因为它是在index.css
我试着把新的职业应用到比赛中，并把差距拉大（我觉得问题就在那里）.当我在页面上有游戏时，游戏组件下有8 rem的额外空间.我试图在App.jsx中创建一个div，但没有帮助.我知道如果我重新分配class属性，它应该应用它，但是无论我做什么，我仍然有额外的空间。我确实试着从我的App.jsx中注解掉组件，当我刷新页面仍然在页脚下时，我有额外的8 rem。
如果我在index.css中注解掉部分（代码片段中显示的部分），那么所有的空格都会消失，包括我有问题的空格，但是整个页面不是我需要的方式。也许有人可以给予我一个提示？谢谢！
当我检查页面时，我有下一个：inspect page，这是该节标记，但具体来说，id=“inner-shadow-companion”Idk的节是什么
我在Chrome中使用的外部扩展程序是否可能会导致页面出现额外的间距或向页面添加额外的元素？