How do I get rid of the white space under and above image

Question

I have an image which has a border around it and the code looks like this:

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

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

I get a small 1px high white gap between the upper and lower borders and the image. I have tried putting the image in a container and setting the border to the container, but the gap still appears. I have tried setting position to absolute and relative, but they didn't work. I have tried using css3's box-size, but that didn't work either.

Any suggestions please.

Answer 1

Your code should work as is. Here's a demo.

I think the problem is your actual picture. Are you 100% sure it doesn't have some small white border in the image itself? Try to replace pathtoimage.png with http://placehold.it/350x150 and see if the white edges are gone.

Lastly, try setting padding: 0 !important; to make sure it isn't inheriting padding from somewhere else.

Answer 2

There are three types of edges around elements: padding, margin and border.

Add:

margin: 0;

Here is an image explaining which is which: