如何解决React应用整个页面右侧和底部出现多余空白的问题

React应用仅在页面右侧和底部出现了多余空白，多方查找解决方案始终未能解决。

页面顶部显示效果：

页面底部显示效果：

看起来像是整个应用被设置了margin，但已经在关联index.js的CSS文件中添加了如下代码：

* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  margin-right: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

按常理这段代码应该能解决边距问题，但故障依旧存在，确信遗漏了某项基础配置但无法定位问题。以下是index.js代码：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";


ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById("root")
);

1. 补全全局CSS重置规则，现有规则缺少盒模型配置和根容器宽高限制，替换为以下代码即可解决绝大多数场景的空白问题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#root {
  width: 100%;
  min-height: 100%;
}

2. 检查App组件内的子元素配置：如果有元素设置了width: 100vw，替换为width: 100%即可，100vw会包含滚动条宽度，是最常见的导致右侧空白的原因。
3. 若修改后仍有问题，打开浏览器开发者工具（F12）的元素面板，逐层悬浮选中html、body、#root以及App下的子元素，查看高亮尺寸框，即可直接定位到超出视口的溢出元素，针对性修改即可。

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