Email template appearing with a white line between image blocks

[fern1]

Hi everybody!

We have an email template on ACS that worked without an issue until recently. We noticed the images were not loading on the new Outlook version or Outlook Web, but it was okay for Gmail and other boxes.
Our agency partner informed us that it was because the images we were using were HTTP and not HTTPS. 
We corrected this and the images are loading, but now we are facing some white lines around the images for Outlook and Gmail.

How can we correct that?
darkmode 

& regular:

thanks in advance

[ccg1706]

Hi  @fern1!

I share with you recommendations that you can check if they are feasible. 

1. Check for Extra Spacing or Padding: Be sure there is no extra padding, margin, or border applied to the images in the HTML code.

<img src="https://example.com/image.jpg" style="border: 0; display: block;" />

1. Use Inline Styles: Use inline CSS to set the image display properties. This can help ensure consistency across different email clients

<img src="https://example.com/image.jpg" style="display: block; border: 0; margin: 0; padding: 0;" />

1. Table Layout: Wrap your images in table cells to ensure there are no gaps caused by different rendering engines.

<table cellspacing="0" cellpadding="0" border="0">

  <tr>

    <td style="padding: 0; border: 0; margin: 0;">

      <img src="https://example.com/image.jpg" style="display: block; border: 0;" />

    </td>

  </tr>

</table>

1. VML for Outlook: For better rendering in Outlook, you might consider using (Vector Markup Language) for your images

<!--[if gte mso 9]>

<v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="width:600px;height:200px;border:0;display:block;" />

<![endif]-->

<img src="https://example.com/image.jpg" style="display:block; border:0; outline:none; text-decoration:none; width:600px; height:auto;"/>

1. Reset CSS: Include a CSS reset for images at the top of your email’s inline CSS

<style type="text/css">

  img { display: block; border: 0; margin: 0; padding: 0; }

</style>

Test it on tool like Litmus or Email on Acid once changed to preview how your email renders across different platforms and devices.

¡Hope this helps!

Regards,

Celia