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）。

编辑：这与建议的“类似问题” （此处） 无关。我在创建此问题之前已经尝试过垂直对齐。我已将width: 100％和vertical-align: middle添加到片段中以说明此问题。

问题看起来像这样：

在右侧

在底部

- Joe

---

可能是图像内部的div下方有额外空间的重复问题。 - caramba

不是这个。谢谢你的帮助。 - Joe

@caramba 请删除“可能重复”的标记，或者向我证明你的建议中提供了我的问题的答案。 - Joe

请问您能否展示一下“非自愿填充”的图片？我也在使用Chrome，但没有看到任何内容。 - caramba

是的。如果只有我遇到这个问题，那么我的浏览器出了什么问题？O.o - Joe

Answer 1

如果您看到这条信息，我很确定您的4k屏幕设置的缩放比例不是100%。

我有两个4K屏幕，一个设置为100%（我的笔记本屏幕），另一个设置为125%（因为它实际上更大所以需要缩放）。

以下是在我的4k笔记本屏幕上带边框的几张图片。缩放因子为100%，因此一切都很清晰：

然后切换到我的外接屏幕。它在Windows中的DPI设置为125%。在浏览器中，它的缩放比例为100%，但正是DPI设置导致了这种效果：

使用圆形的效果更差，你最终得到的形状甚至不完全是圆形。

显然，使用125％的缩放比例，一像素线条将被缩放为1.25像素，这要求进行亚像素渲染（抗锯齿）或者只需对其进行最近像素点的捕捉。似乎他们没有把图像+ 1像素边框视为一个整体，舍入误差最终导致了这种行为。

将背景颜色设置为与边框颜色相同的修复方法有点奏效，但最终会得到这样的结果：

我认为需要明白的重要事情是，这不会影响大多数人。

另一个可能的解决方案是添加一个绝对定位的 DIV 元素，它与图像具有相同的宽度和高度，并在其上设置边框。确保 box-sizing: border-box 已设置。这将确保边框精确地位于图像之上。然而，一般情况下我不建议这样做，因为它很快会变得难以管理。

- Simon_Weaver

Answer 2

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

这些答案都没有帮助到我，但我发现为img元素添加与边框颜色匹配的background-color可以解决我的问题：

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

- Ferngummy

---

background-color 属性对我的 img 标签没有效果。有什么想法为什么？ - noiseymur

Answer 3

我在Chrome上也遇到同样的问题，我必须确保浏览器缩放比例为100％，这样就解决了。Chrome喜欢在未经您同意的情况下四舍五入像素测量值，在您放大或缩小页面时可能会导致奇怪的样式。

- Kyle Peck

Answer 4

在Windows下的Chrome浏览器中，以上所有方法都没有生效，但是在img标签上添加margin: -1px;的样式可以解决问题。

- Paul

Answer 5

我在开发网站时遇到了同样的问题，发现一些图像下面有微小的间隙。

应用修复程序的是左边的框，右边的没有： 我只找到了一个“仅适用于Chrome”的解决方法：

将img元素添加vertical-align: -webkit-baseline-middle;似乎可以消除它。

- Odilio

---

谢谢！我不知道这里发生了什么，但我敢肯定这在过去不是正常的行为。 - Andrew McOlash

Answer 6

尝试这个：

试试看：

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

这应该解决你的问题。

- Ibrar Khan

Answer 7

如果我没错的话，将width: 100%;添加到图像中将解决这个问题。

- Saravanan I

---

那么，我应该同时使用width: 100%和width: 100%吗？ - Joe

如果宽度被设置为固定值，则max-width/min-width将不起作用。因此最好删除max-width； - Saravanan I

好的，我明白了。但是100%的宽度不幸没有解决它。还是谢谢你的建议。 - Joe

Answer 8

Margin和padding应该可以去掉您看到的白色边框，希望这可以帮到您！

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

- twinaholic

---

我的浏览器还是看起来很乱。这很奇怪，因为我使用的是不太旧的Chrome版本...无论如何，谢谢！ - Joe

我注意到你在问题中发布的CSS与此处不同，是否可能请您发布您的CSS代码，以便我们真正理解和查看您的代码。谢谢。 - twinaholic

我在这里发布的CSS中遇到了同样的问题。我不知道为什么会出现这种情况，没有任何指示浏览器创建填充或其他任何东西。 - Joe

使用我的 CSS 代码，并且你有（.img img {}），移除 .img @Joe。 - twinaholic

.img是有意的。.img是我用于包含图像（img）的div中使用的类。 - Joe

Answer 9

你可以尝试使用阴影来修复它。这对我在4K显示器和全高清笔记本电脑上都去除了白色空间。

-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);

- Entalist

Answer 10

我希望这可以帮助你，并与你现在的经验相一致：图像内有额外空间 说明：为什么图像下方会有间隙？ 图像下方的间隙或额外空间不是错误或问题，而是默认行为。根本原因是图像是替换元素（参见MDN替换元素）。这使它们可以“像图片一样工作”并具有自己的内在尺寸，长宽比等。 浏览器将它们的显示属性计算为行内元素，但赋予它们特殊的行为，使它们更接近于行内块元素（例如可垂直对齐，给它们高度、上/下边距和填充，转换等）。

这也意味着：

<img> 没有基线，所以当图像在具有 vertical-align: baseline 的内联格式上下文中使用时，图像底部将放置在文本基线上。（来源：MDN）

由于浏览器默认将 vertical-align 属性计算为基线，因此这是默认行为。以下图像显示了文本基线的位置：

源图像

根据此主题，有不同的方法来解决此间隙：

• 将图像的 vertical-align 属性设置为 vertical-align: bottom;、vertical-align: top; 或者 vertical-align: middle；
• 将图像的 display 属性设置为 display:block; -- 迄今为止，这是最有效的方法。
• 设置 line-height:0; 或者 font-size:0;

- Shironekomaru

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。- 来自审查 - Lin Du

@slideshowp2已根据提到的相同主题添加了一些参考资料。 - Shironekomaru