CSS - 图像边界中奇怪的白色空间

Question

我有两个图像，我给了边框（1px纯黑色），但在我的浏览器中，它们呈现出一个奇怪的白色空间 - 有点像无意识的填充。

白色空间仅在一侧，但根据变焦，它可以改变边框的一侧（例如突然“伪填充”不再在右侧，而是在顶部），甚至在双方在同一时间。

.img img {
  width: 100%;
  vertical-align: middle;
  display: block;
  border: 1px solid black;
}

<section class="imgrid">
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
</section>

就相关代码而言，这是关于它的。图像为500px正方形（500x500）。

编辑：这与建议的“类似问题”here无关。在创建此问题之前，我已经尝试过垂直对齐。我在片段中添加了宽度：100％和vertical-align：middle来说明这一点。

问题看起来像这样：

on the right

at the bottom

Answer 1

尝试一下：

<style>
    * {
        margin: 0;
    }
</style>

这应该可以解决您的问题。

Answer 2

如果我没错，将width: 100%;添加到图片会解决问题。

Answer 3

当我发现一些网站下面有一个小小的间隙时，我遇到了同样的问题。

左侧的框已应用修复，右侧的框未：

我发现只有Chrome的 “修复” ：

将vertical-align: -webkit-baseline-middle;添加到img元素似乎将其删除。

Answer 4

边距和填充应该删除你看到的白色边框我希望这有帮助！

img {
  padding:0px;
  margin:0px ;
  width: 100%;
  height:auto;
  vertical-align: middle;
  display: block;
  border: 1px solid black;
}

Answer 5

在Windows下的Chrome浏览器中，没有一个对我有用，但是在img上设置margin: -1px;可以解决问题

Answer 6

我遇到了同样的问题（使用 Chrome）并遇到了这个线程。

这些答案都没有帮助我，但我发现将边框颜色与 background-color 元素相匹配的 img 解决了我的问题：

img {
    border: 5px solid #000;
    background-color: #000;
}