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.
- Right click on the image in your message
- Click Image Properties
- Open the Advanced Tab
- Find the text box for "style"
- Add the style: "display: block;"
- If you also want to make sure that a border doesn't appear around linked images, make the whole style:
- ; border-style: solid; display:block;
This will add the style to the HTML of the message, like the example below:
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;">
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.
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:
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: