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.