css - 如何摆脱图像下方和上方的空白

Question

我有一个图像，它周围有一个边框，代码如下所示：

img{
 display: block;
 border: 2px solid #000;
 height: 140px;
 width: 200px;
 padding: 0;
}

<img src="pathtoimage.png" alt="product name" />

我在上下边框和图像之间有一个 1px 高的白色间隙。我尝试将图像放入容器中并将边框设置为容器，但仍然出现间隙。我尝试将位置设置为绝对和相对，但它们不起作用。我曾尝试使用 css3 的 box-size，但这也不起作用。

请有任何建议。

score 2 · Accepted Answer

您的代码应该按原样工作。这是一个演示。

我认为问题是你的实际图片。您是否 100% 确定图像本身没有一些小的白色边框？尝试替换pathtoimage.png并http://placehold.it/350x150查看白色边缘是否消失。

最后，尝试设置padding: 0 !important;以确保它没有从其他地方继承填充。

score 0 · Accepted Answer

元素周围有三种类型的边缘：内边距、边距和边框。

添加：

margin: 0;

这是一张图片，解释了哪个是哪个：

2 回答 2