Email HTML: Prevent Images from Showing Gaps between Each Other

3 minute read

Team PostUp

You have a beautifully built, glorious email, there’s just one problem: there’s a gap – of white space no less – between all your perfectly mapped image slices. Fear not, the PostUp team are on hand to help you solve this problem and stop it from happening in the future.

How to use the “display:block;” Property

99% of the time, this is due to your image not having the proper styling tag. Every time images are used next to each other in the cells of a table – no matter the width or height specifications of the cell – there should be a display block style added.  This removes the white gap between images.

The display property defines how certain HTML elements should be displayed. Frankly, whether they aren’t displayed at all – display:none –  or whether the element will be displayed as block-level, and will span the full width of the space available – display:block.

If you add this styling to every image source that is adjacent to another image your problem should be resolved.

<tr>
<td>
<img src=”http://placehold.it/300x300” alt=” “ border=”0” style=”display:block;”>
</td>
<td>
<img src=”http://placehold.it/100x300” alt=” “ border=”0” style=”display:block;”>
</td>
</tr>

Remember to place this styling inline, as webmail clients tend to strip out any styling used between the style tags in email.

If, for some reason this doesn’t resolve your problem, check the properties of the tables used in your email and make sure they have a property of cellpadding=”0” and cellspacing=”0”assigned to them.

Images in Your Email Showing that Ugly Blue Outline?

The display:block stylizing isn’t limited to only images. While adding this property to images removes spacing, you can also add this to URLs to remove that ugly blue border that can show up around linked images, especially in Gmail.

<tr>
<td>
<a href=”http://postup.com/” style=”display:block;”>
<img src=”http://placehold.it/300x300” alt=” “ border=”0” style=”display:block;”>
</a>
</td>
<td>
<img src=”http://placehold.it/100x300” alt=” “ border=”0” style=”display:block;”>
</td>
</tr>

Again, this will be best placed inline, to ensure webmail clients will honor the style. That way, your images will render as you have designed them to!

Learn how you can get the results you need via automated email assembly and deployment, list growth and multichannel engagement. Book a demo today.

Book a  demo

Reliable products. Real results.

Every day, thousands of companies rely on Upland to get their jobs done simply and effectively. See how brands are putting Upland to work.

View Success Stories