Get Rid of Gaps Between Images in Outlook 2013

Spliced images that render perfectly in Outlook 2007 and 2010 will sometimes show a gap in Outlook 2013. This problem occurs when the images are less than 20px tall. Thankfully, this problem is easy to solve with one simple trick.

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:

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>
```

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>

Make sure there is 0 border in each of your table tags (this is assigned by default when inserting tables in eMail Networks
```
<table border="0" cellpadding="0" cellspacing="0">
```

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>