Unexpected spacing between images in Gmail HTML email

Other Questions Gmail
1

I’m working on a fancy HTML email for a client. The code checks out as valid XHTML 1.0 Transitional. But when I view it in Gmail, there are spaces showing up between the images.

I’ve tried to fix this by:

  • Setting padding and margin to zero in inline styles for images and anchors
  • Removing whitespace between tags
  • Eliminating newlines in the code

Here’s a snippet of the problematic code:

<a href="#" style="margin: 0; padding: 0;">
  <img src="example1.jpg" alt="Example 1" style="margin: 0; padding: 0;">
</a>
<a href="#" style="margin: 0; padding: 0;">
  <img src="example2.jpg" alt="Example 2" style="margin: 0; padding: 0;">
</a>

The issue appears in the left column of the email. Any ideas on how to get rid of these gaps in Gmail?

2

hey mate, have u tried using tables? i kno it’s old school but it works like a charm for me. wrap each img in a table cell with no cellpadding/spacing. something like this:

lemme know if that helps!

3

I’ve encountered this issue with Gmail before. It’s frustrating, but there’s a workaround. Try setting display:block on your images and font-size:0 on the parent container. This often eliminates those pesky gaps.

Here’s an example of how you might modify your code:

<div style=\"font-size:0;\">
  <a href=\"#\" style=\"margin:0; padding:0; font-size:0;\">
    <img src=\"example1.jpg\" alt=\"Example 1\" style=\"margin:0; padding:0; display:block;\">
  </a>
  <a href=\"#\" style=\"margin:0; padding:0; font-size:0;\">
    <img src=\"example2.jpg\" alt=\"Example 2\" style=\"margin:0; padding:0; display:block;\">
  </a>
</div>

Also, ensure your images are saved with exact dimensions needed. Sometimes extra space in the image file itself can cause issues. If problems persist, consider using a table-based layout for more consistent rendering across email clients.

4

As someone who’s been in the trenches of email design for years, I can tell you Gmail’s rendering quirks are notorious. One trick that’s saved me countless headaches is using the ‘font-size: 0;’ method, but coupling it with ‘line-height: 0;’ on the parent container. This combo often zaps those phantom spaces.

Another approach that’s worked wonders for me is ditching anchor tags altogether when they’re not necessary. If your images don’t need to be clickable, try this:

<div style="font-size: 0; line-height: 0;">
  <img src="example1.jpg" alt="Example 1" style="display: block; margin: 0; padding: 0;">
  <img src="example2.jpg" alt="Example 2" style="display: block; margin: 0; padding: 0;">
</div>

This simplified structure can sometimes bypass Gmail’s tendency to inject unwanted spacing. If you absolutely need links, consider wrapping each image in its own table cell. It’s old-school, but it works like a charm in stubborn email clients.