Flex容器两侧出现边距问题：如何去除橙色侧边空白？

以下是几种常见的排查和解决方法：

1. 清除body默认边距 #

浏览器默认给<body>设置了margin: 8px，这是最常见的边距来源。添加CSS重置：

body {
  margin: 0;
  padding: 0;
}

2. 修正Flex容器的布局属性 #

检查你的flex容器是否自带padding/margin，同时确保它撑满视口宽度：

.your-flex-container {
  display: flex;
  width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免padding撑开容器宽度 */
}

3. 移除子项的外边距干扰 #

如果flex子项设置了margin，可能会挤压容器导致视觉上的边距：

.your-flex-container > * {
  margin: 0;
}

如果需要子项间距，建议用flex的gap属性替代margin，避免影响容器整体布局。

4. 全局重置默认样式 #

如果不确定具体是哪个元素导致的边距，可全局清除所有元素的默认内外边距：

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

内容的提问来源于stack exchange，提问作者honj - t