如何移除HTML标签占用的额外空白？（ReactJS开发场景）

问题说明 #

盒子外部的空白由index标签占用，需要移除该空白，开发环境为ReactJS。

相关参考内容 #

• 页面效果：盒子外部存在明显空白区域
• 组件代码：对应React组件的结构实现
• Styled Components样式1：组件关联的第一部分样式代码
• Styled Components样式2：组件关联的第二部分样式代码

解决方法 #

1. 全局样式重置
   在全局样式文件或GlobalStyle组件中添加基础样式重置，消除浏览器默认的边距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html, #root {
  margin: 0;
  padding: 0;
  width: 100%;
}

2. 清除index标签自身边距
   如果是自定义的index容器组件，直接在其Styled Components样式中清除边距：

const IndexWrapper = styled.div`
  margin: 0;
  padding: 0;
  width: 100%;
`;

3. 排查父级元素样式
   检查index标签的父级组件是否设置了额外的margin或padding，逐一移除不必要的间距配置。

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