Unwanted table cell padding

Question

I am creating a newsletter for a client. I am having issues with padding on the topmost td cell on the first inner table. I have no idea why it is creating this extra padding at the bottom of the td. I have tried inline css height, zeroing all padding and margins on it, and I still have not had luck getting rid of the white-space between the two inner tables. I would appreciate any help. It is probably something simple that I am overlooking, but I have run out of ideas.

page with the email template: http://www.bemidjimillworks.com/email_templates/Default-Template.html

The td I am referring to is this one:

<td style="width:600px;padding:0;margin:0;">
     <a href="http://www.bemidjimillworks.com">
         <img src="http://www.bemidjimillworks.com/images/newsletter/01_header.jpg" />
     </a>
</td>

Answer 1

Just add the css property vertical-align: top; to the top image

<img src="http://www.bemidjimillworks.com/images/newsletter/01_header.jpg" style="vertical-align: top;">

Answer 2

The most widely supported way to vertically align in html email is using the html element valign="top". This is considered best practice in html email design.

CSS vertical-align as suggested, is not fully supported in major email clients (Outlook) and will give you inconsistent results.

Applied to your example:

<td valign="top" style="width:600px;padding:0;margin:0;">
     <a href="http://www.bemidjimillworks.com">
         <img src="http://www.bemidjimillworks.com/images/newsletter/01_header.jpg" />
     </a>
</td>