如何摆脱图像下方和上方的空白区域

Question

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

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

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

我在上下边框和图像之间得到一个1px高的白色间隙。我已经尝试将图像放在容器中并将边框设置为容器，但仍然出现间隙。我已经尝试将位置设置为绝对和相对，但它们不起作用。我尝试过使用css3的盒子大小，但这也没用。

请提出任何建议。

Answer 1

您的代码应该按原样运行。这是一个demo。

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

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

Answer 2

元素周围有三种类型的边：填充，边距和边框。

添加：

margin: 0;

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