如何摆脱图像下方和上方的空白答案

【问题标题】：How do I get rid of the white space under and above image如何摆脱图像下方和上方的空白
【发布时间】：2012-11-09 11:48:55
【问题描述】：

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

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

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

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

请有任何建议。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

安德斯，谢谢。杰格恩 fjols。 Jeg har lig tjekket billedet og det er faktisk der, hvor problemet ligger。该图像是具有透明画布的PNG，画布比实际图像高2px。我应该先检查一下。德为 hjaelpen

【解决方案2】：

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

添加：

margin: 0;

这是一张解释哪个是哪个的图片：

【讨论】：