Eliminate vertical whitespace between images

I am working on e-mail template. Code is something like this :

<table width="702" cellpadding=开发者_Go百科"0" cellspacing="0" align="center" id="template">
<tr>
<td align="left" valign="top">
<img src="/email/new/top_bar.png" width="702" height="11" alt="" border="0">
<img src="/email/new/bottom_bar.png" width="702" height="11" alt="" border="0">
</td>
</tr>    
</table>

I always get vertical whitespace between these two images.

I tried using valign, vspace but no luck. How to get rid of it?

You get whitespace because the images are laid out inline (between two rows of lines there is spacing). You can either lay them out as block elements....

img { display:block; }

.. or you can use the vertical-align property to define a different vertical align which should remove the spacing...

img { vertical-align:top; }

http://vidasp.net/media/CSS-vertical-align.gif

BTW, please stop using deprecated attributes (cellpadding, cellspacing, align, border). For each of those attributes there is a CSS alternative which should be used. Also, use some CSS reset code (like Yahoo CSS Reset)...

Strange: This shouldn't be.

Maybe the E-Mail client interprets the line break in between the <img>s as white space.

Try setting them directly next to each other: <img src...><img src...

Your lines are high enough to accommodate text in the default font, which is higher than your 11 pixel images, hence the gap.

You need to make the lines smaller; the simplest way for your example is to shrink the font:

<td style="font-size: 1px;" align="left" valign="top">

Tested in IE 8, Firefox 3.6 and Chrome 6.