I’m working on an HTML email template and running into a weird problem. When I test the email in Gmail, there are unwanted spaces showing up between my images. The HTML passes validation and looks fine in other email clients, but Gmail keeps adding these gaps.
I’ve tried setting margin and padding to zero on both the images and their container links. I made sure there’s no whitespace in the code between tags. Here’s a sample of what I’m working with:
It’s the vertical-align property. Gmail defaults images to baseline alignment, which creates that annoying space below them. Just add vertical-align: top or vertical-align: middle to your image styles. I hit this exact issue last month and it fixed it right away. If that doesn’t work, try wrapping each image in its own table cell. Gmail’s CSS support is a mess, but it handles table layouts way better than pure CSS positioning. Also set font-size to 0 on any parent elements with images - Gmail inherits text spacing that messes with image positioning.
Gmail’s rendering quirks are the worst. Adding display: block to your images usually fixes this spacing issue. Gmail treats images as inline elements by default, creating those gaps you’re seeing. Update your image styles with display: block; margin: 0; padding: 0; and that should clear it up. Also check if your images are in table cells - Gmail handles tables way better than divs for email layouts. Gmail sometimes adds its own line-height too, so try setting line-height: 0 on the parent container. These Gmail fixes have saved me when other clients render fine but Gmail acts up.
gmail’s the worst for this. add font-size: 0 to whatever element wraps your images - gmail treats images like text and adds spacing. also, zero whitespace between your </a> and <a> tags. even line breaks mess things up. i just put everything on one line to avoid headaches.