How To Fix White Gaps Between Images In Email Designs

Have you ever noticed white border issues when creating image-heavy email designs? A lot of email platforms will take an image-heavy design and break up the image quadrants to expose a white gap. This extra spacing can ruin the flow and appearance of the design and lead to rendering issues.

Luckily, there is a quick way to fix this issue by adding some additional coding into your HTML.

Simply add this line of code into the <HEAD> section of the template:

<style>img {display:block}</style>

Then add the “display:block” tag into each of the individual images to ensure that everything lines up correctly. For instance, a typical image tag (with this additional coding emphasized in bold) would look something like this:

<img alt=”Name” style=”display:block” src=”imagefile.jpg”>

By incorporating these two display block tags into your email design, you will be able to correct any rendering issues related to gaps in your images.