Question

I have an html table as

<table width="600" cellspacing="0" cellpadding="0">
<tr>
  <td><img src="image.jpg" width="600" height="170" style="padding:0; margin:0;"></td>
</tr>
<tr>
 <td>
  <p style="padding:0; margin:0;">Text</p>
 </td>
</tr>
</table>

Inspite of specifying the padding, margin as 0. I can see some white space between the image and the Text in Outlook 2003, 2002 email clients.

How do I get rid of it?

Answer 1

You’re most likely seeing line-height of the <td>. Use the following CSS to remove it, along with any whitespace:

/* Gets rid of table cell whitespace */
table td {
  line-height: 0;  
  font-size: 0;
}

/* Sets the font and line height correctly for the paragraph of text */
table td p {
  line-height: 14px;
  font-size: 14px;   
}

You can see it in action here.