Padding issue on HTML email

Question

I have an issue with excess padding appearing around either the table or image on mobile with a HTML email signature and I'm unable to find the solution.

I must of tried every single solution I have researched including:

Adding display:block to the image
Adding a line-height: 1px to the td
Adding font-size: 0; to the td
Making sure every section had padding: 0; and margin: 0;
Adding cellpadding="0" and cellspacing="0" to all tables, tr and td elements
Adding width and height to the table and td (which didn't have any effect)
Adding float: left and align="left"
Adding table-layout:fixed;
Adding border: 0; border-spacing: 0; and border-collapse; on elements

The issue seems to appear on Samsung and iPhone devices that I have tested.

Any new suggestions would be appreciated.

The image that specifically has extra spacing is here:

<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180"> 
    <tr style="padding: 0; margin: 0;">
        <td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important;"></td>
    </tr>
</table>

How here is the entire code as I have two tables side by side which may be the cause of the issue:

<!DOCTYPE html>
<html>
<head>
<style>
a {
    color: #00001b;
    text-decoration: underline;
}
table {
    padding: 0;
    margin: 0;
    display: block;
}

</style>
</head>
<body>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>    
    <td>            
        <table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
            <tr style="padding: 0; margin: 0;">
                <td cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0;" border="0" height="10">
                    <table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180"> 
                        <tr style="padding: 0; margin: 0;">
                            <td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
                        </tr>
                    </table>
                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;">
                        <tr>
                            <td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
                                <strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
                                <span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />          
                            </td>
                        </tr>
                    </table>                    
                </td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td colspan="2">
    <p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
    <strong>T:</strong> <a href="tel:0000000">00000000</a> | 
    <strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p>
    <p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a>&nbsp;<a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p>
    </td>   
</tr>
</table>
</body>
</html>

Although not the answer you're looking for: Your code is very hard to debug because you're using old HTML techniques and bad practices. First of all, use table tags only for tabular data, never for layout purposes (use div elements instead of table cells). Second, stop using inline CSS, use classes and stylesheets instead. Otherwise it's too hard to help you (but your problem is probably related to using tables the wrong way). — DanyAlejandro
Hi DanyAlejandro, The code is for an email template, hence the use of tables and inline css. — Pedz

WesSolo WesSolo · Accepted Answer · 2017-07-06T08:45:32

<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
    <tr>    
        <td>            
            <table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="345" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td valign="top">
                        <table align="left" cellpadding="0" cellspacing="0" border="0" width="180"> 
                            <tr>
                                <td valign="bottom" cellpadding="0" cellspacing="0"><img src="logo.png" width="180" height="100" alt="" style="display: block"></td>
                            </tr>
                        </table>
                    </td>
                    <td valign="top">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="165">
                            <tr>
                                <td style="text-align: left;padding:0 0 0 25px;">
                                    <strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
                                    <span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />          
                                </td>
                            </tr>
                        </table>                    
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">
        <p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
        <strong>T:</strong> <a href="tel:0000000">00000000</a> | 
        <strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p>
        <p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a>&nbsp;<a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p>
        </td>   
    </tr>
</table>

You may want to add a </td><td> between your two tables. I've also moved the 25px padding to the left of the copy, rather than the image. (I've assumed the img dimensions here). This looked ok on my EoA previews, if it doesn't help could you post a screenshot of your issue?

Padding issue on HTML email

2 Answers