Elemenate vertical whitespace between images

Question

Hello,

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 ride of it?

Thanks

Answer 1

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

Answer 2

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

Answer 3

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.