If you're doing a quick old-school hack, or maintaining an old site, you will probably hit this problem sooner or later. The issue is that you insert an IMG into a table for layout purposes, but you can't get your elements aligned because no matter what you do in your markup, the browser leaves a gap below your image.

The problem is that modern browsers support CSS (this is good) but it has some repercussions for old-style code (this is bad). One of the problems is that the meaning of "bottom" has subtly altered. Modern browsers treat images as if they were inline text, and the bottom of text isn't the bottom of the lowest letters - it's the bottom of the characters which don't have descenders. Even if you don't have any text in your table, it has a default text size, and the bottom of any image placed in your table will correspond with where the bottom of this "phantom" text would fall - its baseline.

As they say, a picture is worth a thousand words, so:

George's image doesn't extend to the bottom of his table cell, because the notional text has redefined what "bottom" means. Even if we specify his valign as "bottom" the problem doesn't go away, the gap just moves around.

Solution

The solution I use, which works most of the time, is to define a class in a CSS style file which changes the problematic element from inline to block mode:

td img.nogap {display: block;}

Then use this class in your image tag:

<td>
   <img  class="nogap" src="images\mypicture.jpg" />
</td>

The display:block overrides the default layout behaviour in the browser.

For a REALLY detailed discussion of this issue, see here