CSS - 图像边框中的奇怪空白答案

【问题标题】：CSS - Weird White-Space In Border of ImageCSS - 图像边框中的奇怪空白
【发布时间】：2018-01-10 23:24:12
【问题描述】：

我有两个图像，我给了边框（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 无关。在我创建这个问题之前，我已经尝试过垂直对齐。我在 sn-p 中添加了 width: 100% 和 vertical-align: middle 来说明这一点。

问题是这样的：

on the right

at the bottom

【问题讨论】：

Image inside div has extra space below the image的可能重复
不，不是。不过，谢谢。
@caramba 请删除“可能的重复项”或向我证明您的建议中如何回答我的问题。
我没有看到任何空白...发布图片以及您使用的浏览器？
是的。如果我是唯一一个遇到这个问题的人，我的浏览器到底出了什么问题 O.o

标签： html css

【解决方案1】：

我在 Chrome 上遇到了同样的问题，我必须确保浏览器处于 100% 缩放状态并为我解决了这个问题。 Chrome 喜欢在未经您同意的情况下对 px 测量值进行四舍五入，这可能会在您放大或缩小时导致奇怪的样式。

【讨论】：

【解决方案2】：

我希望这对您有所帮助，并与您现在的经历保持一致：Image inside div has extra space below the image

解释：为什么图片下方有空隙？ 图像下方的间隙或额外空间不是错误或问题，而是默认行为。根本原因是图像被替换元素（参见 MDN 替换元素）。这使他们能够“像图像一样行事”并拥有自己的内在尺寸、纵横比...... 浏览器将其显示属性计算为内联，但它们赋予它们一种特殊行为，使它们更接近内联块元素（因为您可以垂直对齐它们，给它们一个高度，顶部/底部边距和填充，变换......）。

这也意味着：

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

由于浏览器默认计算垂直对齐属性到基线，这是默认行为。下图显示了基线在文本上的位置：

Source Image

根据这个帖子，有不同的方法可以解决这个差距：

将图片的vertical-align属性设置为vertical-align: bottom;vertical-align: top;或vertical-align: middle；
将图片的显示属性设置为display:block;——这是目前为止最有效的方式。
设置line-height:0; 或font-size:0;

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@slideshowp2 根据提到的同一线程完成了一些参考。

【解决方案3】：

如果您看到此内容，请确定您将 4k 屏幕设置为 100% 缩放以外的设置。

我有两个 4k 屏幕，一个设置为 100%（我的笔记本电脑屏幕），另一个设置为 125%（因为它的物理尺寸更大，因此需要缩放）。

这是我的 4k 笔记本电脑屏幕上带有边框的几张图片。比例因子是 100%，所以一切都很干净：

然后转到我的外部屏幕。这具有 125% 的 DPI 设置（在 Windows 中）。在浏览器中它是 100% 缩放，但它是 DPI 设置导致这种效果：

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

显然，在 125% 的缩放比例下，一个像素线将被缩放为 1.25 像素，这需要子像素渲染（抗锯齿）或仅捕捉到最近的像素。似乎他们没有将图像 + 1 像素边框视为单个实体，最终导致这种行为的是舍入误差。

将背景颜色设置为与边框颜色相同的修复工作，但您最终会得到以下结果：

我认为重要的是要意识到它不会影响大多数人。

另一种可能的解决方案是在相同宽度和高度的顶部添加一个绝对 div，并在其上设置边框。确保设置了box-sizing: border-box。这将确保边框正好在图像的顶部。不过，我不一般不推荐这样做，因为它很快就会变得难以管理。

【讨论】：

【解决方案4】：

我有同样的问题（使用 Chrome）并遇到了这个帖子。

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

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

【讨论】：

【解决方案5】：

试试这个：

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

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

【讨论】：

【解决方案6】：

在 Windows 下的 Chrome 中没有一个对我有用，但是在 img 上设置 margin: -1px; 就可以了

【讨论】：

【解决方案7】：

我在开发网站时遇到了同样的问题，当时我注意到一些图片下面有一个微小的间隙。

左边的方框应用了修复，右边的没有：

我发现一个“修复”仅适用于 Chrome：

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

【讨论】：

谢谢！不知道这里发生了什么，但我可以发誓这在过去不是正常行为。

【解决方案8】：

边距和内边距应该会移除您看到的白色边框，希望对您有所帮助！

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

【讨论】：

在我的浏览器中看起来仍然很乱。这很奇怪，因为我使用的是不太旧的 Chrome 版本……无论如何，谢谢！
你能把你的屏幕截图给我们看看吗.. 并尝试使用谷歌 chrome 开发者工具（“Ctrl+Shift+I”）查看白色填充的来源。 @乔
i.imgur.com/vvCxFlA.jpg - 根本没有填充，也没有边距。我确定了这一点
我注意到与您在此处发布的问题不同的 css，如果您可以发布您的 css 以便我们真正理解并查看您的 css 代码，是否有可能，谢谢。
我在这里发布的 CSS 也有同样的问题。而且我不明白为什么会这样，没有什么告诉浏览器创建填充或任何东西

【解决方案9】：

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

【讨论】：

酷，所以我应该同时使用 width: 100%;和宽度：100% 吗？
如果宽度设置为某个固定值，max-width/min-width 不会做任何事情。所以最好去掉 max-width;
好吧，我明白了。但不幸的是，100% 宽度并没有解决它。仍然感谢您的建议