嘿，我来帮你搞定这个图片两侧白边的问题！你说用margin修复没用，大概率是没找到问题的根源，咱们一步步来排查解决。

首先，排查全局样式的默认边距 #

浏览器会给body元素默认添加margin和padding，这很可能是白边的来源之一。你当前的body样式只设置了overflow和height，没有重置默认的内外边距，先把这个补上：

body {
  overflow: hidden;
  height: 100%;
  margin: 0; /* 清除body默认margin */
  padding: 0; /* 清除body默认padding */
}

另外，你给.navbar用了margin: -10px来消除边距，这种负margin的写法容易引发布局偏移问题，不如直接依赖上面重置的body样式，把.navbar的margin改成0就好：

.navbar {
  overflow: hidden;
  background: #1A1A1A;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0; /* 替换原来的负margin */
  font-size: 14px;
  margin-bottom: 0;
}

然后，针对图片本身的样式调整 #

图片两侧的白边还有可能来自这几个点：图片是inline元素自带的间隙、图片宽度没占满容器、父容器有额外边距。给图片添加下面的样式就能解决：

img {
  width: 100vw; /* 让图片占满整个视口宽度 */
  height: auto; /* 保持图片原有比例，避免拉伸变形 */
  display: block; /* 移除inline元素默认的底部间隙 */
  margin: 0; /* 确保图片自身没有额外margin */
}

如果你的图片是放在某个容器里的，那还要确保容器没有额外的padding或margin，并且宽度占满：

.image-container {
  width: 100%;
  margin: 0;
  padding: 0;
}
.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

为什么之前用margin没效果？ #

你之前尝试用margin修复，但没解决的原因可能是：

• 没有先清除body的默认边距，白边其实是body自带的，不是图片的问题
• 图片的inline属性导致的间隙，不是margin能直接消除的，需要改成display: block
• 图片宽度没设置到100%，就算去掉margin，图片本身没占满宽度还是会有空白

按照上面的步骤调整后，应该就能彻底解决图片两侧的白边问题啦！

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