Eliminate vertical whitespace between images

Question

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

<table width="702" cellpadding="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?

Answer 1

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)...