Search code examples
outlookhtml-email

padding not respected in outlook on button


I have an anchor link with padding:

<a href="http://my.cris.dev:3008/services/3/viewer" style="text-decoration:none; background-color:#137191; color:#fff; display:block; padding:16px 16px 16px; font:100 16px/16px &quot;Cabin&quot;,Arial, Helvetica, sans-serif; letter-spacing:0.025em; border-radius:4px;">Discover your 3D</a>

But outlook doesn't respect this padding, it's just removed, what's the best solution to not mess up the design in other clients.


Solution

  • Outlook's support for the box model is... sketchy. Try this code:

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td bgcolor="#137191" style="padding: 16px; border-radius:4px">
                            <a href="http://my.cris.dev:3008/services/3/viewer" target="_blank" style="font-size: 16px; mso-line-height-rule:exactly; line-height: 16px; font-family: 'Cabin',Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing:0.025em; color: #ffffff; text-decoration: none; display: inline-block;">Discover your 3D</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    

    This will solve your collapsing padding issue in Outlook. Outlook will still display squared-off corners instead of border-radius, but at least you'll get a padded button that is clickable.

    (I added/edited a few other properties to help cross-client display)

    There are a few way to achieve bulletproof buttons in email if you prefer another method.