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，但也没用。

请提出任何建议。

Answer 1

您的代码应该可以正常工作。这是一个 demo .

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

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