ARTICLE AD BOX
I am trying to use Jira to send HTML email template to Gmail. The HTML code is using table tags and inline CSS. However, when I test, I notice there is a gap between each block for Gmail, while I don't get the similar issue with Outlook. How to mitigate this issue for Gmail?
<html> <body style="margin:0;padding:0;background-color:#f4f4f4;"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#f4f4f4;margin:0;padding:20px 0;"> <tr> <td align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="800" style="width:100%;max-width:800px;border-collapse:collapse;font-family:Arial,Helvetica,sans-serif;"> <\!-- Block 1: Top Header --> <tr> <td style="background-color:#0a86dd;padding:24px 28px;color:#ffffff;"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="font-size:56px;line-height:56px;font-weight:800;">SCA</td> <td align="right" style="font-size:16px;line-height:22px;font-weight:700;text-transform:uppercase;"> TECHNOLOGY SERVICES<br> <span style="font-size:14px;font-weight:600;opacity:0.95;">MAKING TECHNOLOGY EASY</span> </td> </tr> </table> </td> </tr> <!-- Block 2: Orange Alert --> <tr> <td align="center" style="background-color:#f89a1c;padding:56px 24px;color:#ffffff;"> <div style="font-size:56px;line-height:56px;font-weight:700;margin-bottom:18px;">Affected Service</div> <div style="font-size:28px;line-height:34px;font-weight:500;">Planned Outage</div> </td> </tr> </table> </td> </tr> </table> </body> </html>