Get Rid of Gaps Between Images

Sometimes a message will look great in the web preview, but then an email client will render your images with gaps that look like horizontal lines between the images.  Here are some simple tricks to solve this problem. 

Add the display:block property to your images

Some email clients will add spacing around images if they do not have the style "display:block" added.  You can add this style by editing the image properties.

1. Right click on the image in your message
2. Click Image Properties
   
3. Open the Advanced Tab
4. Find the text box for "style"
5. Add the style: "display: block;"
   
6. If you also want to make sure that a border doesn't appear around linked images, make the whole style:
   1. border-width:0px; border-style: solid; display:block;

This will add the style to the HTML of the message, like the example below:

<img src="http://www.imageurlhere.com/sailing.jpg" style="border-width:0px; border-style: solid; display:block;">

Set the line height for each TD to be the same as the image height

This fix is only needed for smaller images that are less than 20px in height.  This works even when setting TD height and other similar attributes has no effect in Outlook 2013.  To add this style, click Source to view the HTML of the message.  Find the table cell that contains the image and add the style="line-height: [image height] px;">

<td width="50" height="10" style="line-height: 10px;" >
   <img height="10" src="http://www.imageurlhere.com/sailing.jpg" width="50" />
</td>

Set the font size to 0

If "Sliced" pictures are showing incorrectly in gmail or other free email clients (with excess padding) use style="font-size: 0;" in your table or adding a <center> tag to the source code of the message.

<center>
	<table cellpadding="0" cellspacing="0" style="font-size:0;">
		<tr>
			<td width="50" height="10" style="line-height: 10px;" >
   				<img height="10" src="http://www.imageurlhere.com/sailing.jpg" style="display:block;" width="50" />
			</td>
		</tr>
	</table>
</center>

Remove any extra paragraph tags

Make sure that only your images are located inside of the table cells.  Delete any <p></p> tags you see in the source code around the images.  Here is an example with paragraph tags:

<table cellpadding="0" cellspacing="0" style="font-size:0;">
	<tr>
		<td width="50" height="10" style="line-height: 10px;" >
			<p><img height="10" src="http://www.imageurlhere.com/sailing.jpg" style="display:block;" width="50" /><p>
		</td>
	</tr>
	<tr>
		<td width="50" height="10" style="line-height: 10px;" >
			<img height="10" src="http://www.imageurlhere.com/sailing.jpg" style="display:block;" width="50" />
			<p>&nbsp;<p>
		</td>
	</tr> 
</table>

If you see any of the paragraph tags around the images as shown in the above example, delete them.  Here's the example above without the paragraph tags:

<table cellpadding="0" cellspacing="0" style="font-size:0;">
	<tr>
		<td width="50" height="10" style="line-height: 10px;" >
			<img height="10" src="http://www.imageurlhere.com/sailing.jpg" style="display:block;" width="50" />
		</td>
	</tr>
	<tr>
		<td width="50" height="10" style="line-height: 10px;" >
			<img height="10" src="http://www.imageurlhere.com/sailing.jpg" style="display:block;" width="50" />
		</td>
	</tr> 
</table>