CSS - 奇怪的白色空间在图像边框
我有两个图像,我给了(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来说明这一点。
问题看起来像这样:
保证金和填充应删除您看到的白色边框,我希望这可以帮助!
img {
padding:0px;
margin:0px ;
width: 100%;
height:auto;
vertical-align: middle;
display: block;
border: 1px solid black;
}
在我的浏览器中看起来仍然显得混乱。这很奇怪,因为我使用的Chrome浏览器版本不太旧......谢谢,无论如何! – Joe
你可以拍摄一个你的屏幕截图供我们看看..并尝试使用Google Chrome开发者工具(“Ctrl + Shift + I”)来查看白色填充是从哪里来的。 @Joe – twinaholic
http://i.imgur.com/vvCxFlA.jpg - 根本没有填充,也没有边距。我确信 – Joe
可能重复[图像内部div在图像下方有额外的空间](https://*.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) – caramba
否, 不是。谢谢,不过。 – Joe
@caramba请删除“可能的重复”或向我证明我的问题的答案是如何在您的建议中提供的。 – Joe