Why is Gmail adding space between elements in my HTML signature?

Question

I've created an HTML email signature that I'm trying to bring into Gmail. The method I've used over the years is to open the HTML file in browser, select + copy all, then paste into Gmail's email signature editor. Haven't had issues before, but now I'm seeing slight extra spacing being added around the elements.

Any ideas what could be causing it and/or how to fix it?

Here is the code I'm using, and below that is a screenshot of how it's displaying in Gmail:

<html>
<head>
<title>Email-Signature_Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="340" height="113.5" border="0" cellpadding="0" cellspacing="0">
    <tr >
        <td rowspan="4">
            <img src="https://images.squarespace-cdn.com/content/5975ffc6d482e9419b20576d/488c0df2-c3fe-4e17-9d16-6db1b93c3f36/Email-Signature_icon.png?content-type=image%2Fpng" width="72" height="113.5" alt="confetti icon"></td>
        <td>
            <img src="https://images.squarespace-cdn.com/content/5975ffc6d482e9419b20576d/3d684df2-f38e-4a0b-95d1-2582ed95fc3c/Email-Signature_name.png?content-type=image%2Fpng" width="264" height="41.5" alt="name"></td>
    </tr>
    <tr>
        <td>
            <img src="https://images.squarespace-cdn.com/content/5975ffc6d482e9419b20576d/0e9e0739-001a-4971-a327-2a9ce0148008/Email-Signature_madeline-title.png?content-type=image%2Fpng" width="264" height="33.5" alt="title"></td>
    </tr>
    <tr>
        <td>
            <a href="https://www.confettiandcompany.com/"><img src="https://images.squarespace-cdn.com/content/5975ffc6d482e9419b20576d/17f148e6-2148-4946-9792-42a5dfc57802/Email-Signature_url.png?content-type=image%2Fpng" width="264" height="15" alt="website"></a></td>
    </tr>
    <tr>
        <td>
            <img src="https://images.squarespace-cdn.com/content/5975ffc6d482e9419b20576d/f67689fd-c121-4b4f-a937-b46b0a1901e8/Email-Signature_contact.png?content-type=image%2Fpng" width="264" height="23.5" alt="contact info"></td>
    </tr>
</table>
</body>
</html>

Screenshot of signature in Gmail

The screenshot looks just fine to me. Can you send a screenshot of how you want it to get rendered? — Twineee The Dark Wizard
– Twineee The Dark Wizard, Commented Apr 25 at 20:44

Nathan · Accepted Answer · 2025-05-06 00:11:00Z

1

I can't see the spacing, but, you need to add style="vertical-align:middle;" to the <img ...> tags. (Alternatively, people often use display:block, but that changes too much sometimes.)

The spacing is due to images being inline and therefore there's some kind of interference with text.

answered May 6 at 0:11

Nathan

5,4692 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is Gmail adding space between elements in my HTML signature?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related