How to Remove the Extra Space Added by Ie Browser on Div Tags

I just want to put an image inside a div like this:


<div>
<div>
<img src="image.jpg" alt="Image" />
</div>
</div>


Seems easy right? Unfortunately, it took me 15 minutes to figure out that the IE browsers are inserting an extra space in the bottom, just after the image. And whatever margin or padding values I set, it's useless.

Conclusion:
IE treats line-break as whitespace so you better remove it. Or put an empty comments inside the div and IE will not put extra space.

So the final tags are:

<div>
<div><!-- empty --><img src="image.jpg" alt="Image" /></div>
</div>