Question

Possible Duplicate:
html, css – weird invisible margin below pictures

I have an image inside a floated div container:

<div><img src="..." /></div>

However, the container is always a few pixels higher than the image inside it which is rather ugly as you can see in this fiddle. Of course that pink area is kind of exaggerated but it clearly shows the issue.

Is there a way to avoid this? I.e. if there’s nothing but the image in the container it shouldn’t have any whitespace below the image. Paddings and margins are already zero so that’s not the cause for the problem.

Answer 1

Check out Images, Tables, and Mysterious Gaps on MDN. The image is inline and sitting on the baseline. The space below is reserved for the descenders in text.

Setting the image to display: block will solve your issue though the aforementioned article is a good read.