Extra White Space Below Image in Gmail HTML Email

Other Questions Gmail
1

I’m working on an HTML email template and running into a frustrating problem with Gmail specifically. There’s this unwanted white space that keeps appearing under one of my images, no matter what I try.

<td align="top">
    <img src="banner_image.png" alt="Newsletter Header" />
    <table border="0" cellpadding="0" cellspacing="0" style="background-color: #333; width: 680px; margin-left: 10px; text-align: center; color: white;">
        <tr>
            <td align="top" style="background-color: #cc0000; height: 45px; padding: 12px 20px; font-size: 22px; font-weight: bold;">
                Special Discount Available<br/>
                Limited Time Only
            </td>
        </tr>
        <tr>
            <td align="top" style="background-color: #333; height: 45px; padding: 8px 20px 18px 20px;">
                <h2 style="font-size: 22px; font-weight: bold;">Need More Information?</h2>
                Feel free to reach out if you want to learn more about anything mentioned in today's update.<br/>
                Call us at (888) 123-4567
            </td>
        </tr>
    </table>
</td>

The banner image at the top keeps showing about 2-3 pixels of white space underneath it, but only in Gmail. Other email clients display it perfectly. I’ve checked my code multiple times and can’t figure out what’s causing this gap. Any ideas on how to fix this spacing issue?

2

Gmail’s rendering engine adds weird spacing around images that other email clients don’t. I’ve fixed this by setting font-size: 1px; and line-height: 1px; on the containing td, plus margin: 0; padding: 0; directly on the image tag. You can also try vertical-align: bottom; on the image - seems backwards but it kills the baseline gap Gmail creates. Watch out for spaces or line breaks between your closing img tag and opening table tag too. Gmail treats those as actual content and adds spacing.

3

Gmail adds gaps because it renders images with default inline styling. Here’s what fixed it for me: set the parent td to style="font-size: 0px; line-height: 0px;" and add style="display: block; margin: 0; padding: 0;" to the img element. Don’t put any whitespace or line breaks between your closing img tag and opening table tag - even one space will create extra pixels in Gmail. Also use border="0" as an attribute on the img tag instead of CSS since Gmail sometimes ignores CSS borders.

4

gmaill seriously does this a lot! just use style="display:block; border:0; outline:none;" on your img tag. also, make sure to remove any line breaks between your img and table tags. gmail is super sensitive to whitespace!

5

gmaill can be tricky with spacing! try adding display: block; and vertical-align: top; to your img. also, setting line-height: 0; on the parent td might help eliminate that annoying gap. good luck!

6

Had this exact problem last month with a newsletter template. Gmail treats images as inline elements by default, which creates that annoying baseline spacing. Here’s what fixed it for me: wrap the image in its own table row and set font-size: 0; on the containing td element. This kills the invisible text baseline Gmail uses for spacing calculations. Also, make sure there’s no trailing whitespace or line breaks right after your image’s closing tag - Gmail’s really picky about this. Proper table structure + zero font-size on the container should fix it completely.