CSS - 奇怪的白色空间在图像边框

-2

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

白色空间仅在一侧，但取决于缩放，它可以改变边界的一侧（例如突然“伪填充”不再位于右侧，而是位于顶部），或者甚至同时在两边。

.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

来源

2017-08-03 Joe

可能重复[图像内部div在图像下方有额外的空间]（https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image） – caramba

否，不是。谢谢，不过。 – Joe

@caramba请删除“可能的重复”或向我证明我的问题的答案是如何在您的建议中提供的。 – Joe

如果我'没有错增加width: 100%;图像将解决这一问题。

来源

2017-08-03 11:30:36

酷，所以我应该使用宽度：100％; AND宽度：100％tho？ – Joe

如果将宽度设置为某个固定值，则max-width/min-width将不会执行任何操作。所以最好删除最大宽度; –

好的，我明白了。但不幸的是，100％的宽度并没有解决它。仍然感谢您的建议 – Joe

保证金和填充应删除您看到的白色边框，我希望这可以帮助！

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

来源

2017-08-03 12:14:44 twinaholic

在我的浏览器中看起来仍然显得混乱。这很奇怪，因为我使用的Chrome浏览器版本不太旧......谢谢，无论如何！ – Joe

你可以拍摄一个你的屏幕截图供我们看看..并尝试使用Google Chrome开发者工具（“Ctrl + Shift + I”）来查看白色填充是从哪里来的。 @Joe – twinaholic

http://i.imgur.com/vvCxFlA.jpg - 根本没有填充，也没有边距。我确信 – Joe

时注意到一些图片有微小的差距之下，我经历了同样的问题，开发一个网站。

在右边的框中有来修复应用，右边一个不：

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

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

来源

2017-11-06 13:06:44 odiw

CSS - 奇怪的白色空间在图像边框

回答

相关问题