HTML email - gaps between images in Outlook 2013

Question

I'm composing an HTML email which looks fine in every major email client except Outlook 2013, which is adding vertical gaps between my image slices. I unfortunately don't have Outlook 2013 installed on my computer so it's making it hard to test, but a screenshot from my client suggests that it looks like this -

My code is available here - HTML version.

I have no idea what more I can do to get rid of the gaps - I've set line-height for the tds and images to zero, I've set the images to display: block, I've set the tables to border 0, cellpadding and cellspacing zero, and border-collapse: collapse. What else can I do to fix it?

Edited to add - I'm actually not sure if the gaps are between images or table rows. From the screenshot it actually looks like it might be the table rows.

Answer 1

Problem solved - changing the line-height of the tds containing the images to the height of the image, rather than 0, resolves the gaps and doesn't break the layout in other clients. So

    <td width="150" style="line-height: 83px;">
       <img src="" height="83px">
    </td>

Answer 2

You are running into issues because you are going about the whole layout wrong. You shouldn't need to break your watch image up into multiple pieces, and definitely shouldn't have an image containing the letters 'DS' from the title in the center.

Because you have a complex layout, it is better to use colspans and nested tables - it is a cleaner technique than cutting images into little pieces. Images that are cut horizontally will always cause issues - if not in the initial send, Outlook will force gaps in there if it was forwarded anyway. If you must cut an image, try to do it vertically as it will remain perfectly intact in all clients.

It is also good practice to have all CTA's (calls to action) and important copy/text in html, not images, as most clients block images by default. It is also considered spammy to have an email that has a bad ratio of images to text.

Give this a try:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="450">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top" width="400" style="padding:30px;">
           Fall in love with...
          </td>
          <td valign="top" width="50"> <!-- It is easier to split an image vertically -->
            <img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;">
            Luxury Watch Brands  <!-- Titles like this should always be in text not images -->
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="150">
                  <img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td valign="top" colspan="3" width="250">
      <table width="250" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            <img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            Shop Luxury Watches >   <!-- Call to actions are better in text not images -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>