React页面底部多余8rem间距问题：移除CSS片段未生效原因排查

一、先确认额外section是不是浏览器扩展搞的 #

• 打开Chrome无痕模式（Ctrl+Shift+N）加载页面，看看Footer下面的多余间距会不会消失。要是没了，那百分百是扩展注入的元素导致的问题。
• 回到正常窗口，挨个禁用Chrome里的扩展（设置→扩展管理），每禁一个就刷新页面看间距问题有没有解决，找到那个搞事的扩展。

二、精准揪出问题元素 #

• 按F12开开发者工具，切到Elements面板，滚到Footer下面的空白处，右键空白点“检查”，看看对应的DOM元素是不是那个#inner-shadow-companion。
• 看Styles面板里这个元素的margin-top样式来源：要是来自你的index.css，说明全局section选择器误命中了这个外来元素；要是来自扩展的CSS，那就是扩展自己的样式搞出来的间距。

三、修复全局样式的副作用 #

• 方案1：缩小样式范围（推荐）
  给你项目里所有需要margin-top:8rem的section加个统一类名，比如.app-section，然后把全局样式改成：

  .app-section { margin-top: 8rem; }
  

  这样只会作用于你自己写的section，不会碰外来注入的元素。
• 方案2：临时排除特定元素
  要是暂时不想改组件，用:not()伪类把那个扩展的section排除在外：

  section:not(#inner-shadow-companion) { margin-top: 8rem; }
  

  注意：要是后续扩展换了元素id，这个方法就失效了，只能当临时应急用。

四、彻底解决扩展干扰 #

• 找到搞事的扩展后，要么直接卸载，要么去扩展设置里看看有没有关闭“页面注入元素”的选项，不让它再往页面里塞额外的section。

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