使用justify-content: space-between时边缘出现异常空白的问题咨询

你遇到的边缘空白，核心原因是**width:100vw的不合理使用**：

• 100vw代表整个视口的宽度，包含垂直滚动条的宽度（当页面存在滚动条时）。而body的默认宽度是100%，这个值对应可视区域宽度（不含滚动条）。两者的宽度差会导致header超出可视区域，出现横向滚动，视觉上表现为元素边缘有空白。

修正方案 #

1. 替换宽度属性：将#header的width:100vw改为width:100%，让header继承body的宽度，与可视区域保持一致。
2. 优化全局样式：全局选择器中的margin:0 auto无意义（auto margin仅对有明确宽度的块级元素生效），改为margin:0避免影响其他元素。

修正后的代码 #

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#header {
  width: 100%;
  height: 50px;
  background-color: grey;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#left,#right {
  background-color: red;
  width: 40px;
  height: 100%;
  text-align: center;
}

HTML

<div id="header">
  <span id="left"></span>
  <span id="topic">Lorem Ipsum Dolor</span>
  <span id="right"></span>
</div>

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