HTML email - white space between table rows

问题:

I am building a set of email postcards and have run into trouble with some versions of Outlook and Gmail creating unwanted spaces between certain (but not all) table rows.

I am fairly new to coding HTML email and need help troubleshooting - can anyone tell me what needs to be changed in my code to resolve this issue?

Here is my test page: http://www.kristi.net/holidaycards/card_test.html

And here is a screen cap showing the problem in Outlook: http://i43.tinypic.com/34ezrc3.gif

These clients are affected:

Outlook 2007
Outlook 2010
Outlook 2013
Gmail (Android)
Gmail (Explorer)
Gmail (Chrome)

Also, just to let you know, users will be opening the HTML in their browser, and then copy-pasting the content into their email client (Outlook), before customizing the text and sending the message.

回答1:

You need style="display:block;" on your images. Try something like this:

<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">

You should note that these gaps are unavoidable if someone forwards your email out of Outlook. For this reason, it is always better to split an image vertically.

This should get you started:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50">
      <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="500" valign="top">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td height="200" valign="top" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px;">
            Content here...
          </td>
        </tr>
        <tr>
          <td>
            <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
      </table>
    </td>
    <td width="50">
      <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
</table>

回答2:

Try to add vertical-align: middle; style to your images something like:

<img alt="" src="" width="500" height="50" style="verticla-align: middle;">

For me it was enought to add only this style.