Get Rid of Gaps Between Images in Outlook 2013

The Solution

Set the line-height for each TD to be the same height as the image it contains. Remember, this fix is needed for smaller images, less than 20px in height.

<td width="600" height="18" style="line-height: 12px;">
 <img height="18" src="..." width="600">
</td>

Here are a few more tips you should keep in mind:

1. Add the border-collapse property to tables in the header of your message. This will get rid of small borders between images in Outlook 2007, 2010, and 2013.

   <style type="text/css">
    table {border-collapse: collapse;}
   </style>

2. Add the display:block proberty to images in your inline CSS

   <td width="600" height="18" style="line-height: 12px;">
    <img height="18" src="..." style="display:block;" width="600">
   </td>

3. Make sure there is 0 border in each of your table tags (this is assigned by default when inserting tables in Critical Impact

   <table border="0" cellpadding="0" cellspacing="0">

4. Set each TD to be the same height as the image it contains

   <td width="600" height="18" style="line-height: 12px;">
    <img height="18" src="..." style="display:block;" width="600">
   </td>