Remove the gap between the image and the Container

This question already has an answer here:

enter image description here

You can the image, and this the demo

As you can see in the picture a small gap is coming between image and the Container. Image is already give css vertical-align:middle. When i increase the height of the container it works perfectly. Waiting for a good answer


Set vertical-align:top on the img

img { vertical-align: top; }

jsFiddle here

By default, the vertical-align property isn’t top, but rather baseline. By simply setting it to top, you can achieve the desired result.