Search code examples
cssemailoutlookhtml-email

Outlook Windows Email Template Padding Issues


I have had to change a section of my email template to accommodate some dynamic text, but when I test my template Outlook Windows is not getting any top and bottom padding from each <p> - I know I probably need a ghost table, but I am not sure where to put it and configure it:

<tr>
    <td style="padding: 0;">
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing: 0;" role="presentation">
            <tr>
                <td height="8" style="background-color: #21c6b8;"></td>
            </tr>
            <tr>
                <td style="padding: 0 20px 0 20px; text-align: center;">
                    <p style="font-size: 16px; font-weight: bold; padding: 10px 0 5px 0;">Title / Teitl</p>
                </td>
            </tr>
            <!-- REPEAT BLOCK STARTS-->
            <tr>
               <td style="padding: 0 20px 0 20px; text-align: center;">
                   <p style="font-size: 14px;"><i>[[title]]</i></p>
               </td>
           </tr>
           <!-- REPEAT BLOCK ENDS -->
           <tr>
               <td style="padding-bottom: 20px; text-align: center;"></td>
           </tr>
            <tr>
                <td height="8" style="background-color: #21c6b8;"></td>
            </tr>
        </table>
    </td>
</tr> 

In my code I have been using ghost tables such as this:

<!--[if (gte mso 9|(IE))]>
  <table width="100%" style="border-spacing: 0;" role="presentation">
     <tr>
        <td valign="top" style="padding: 0">
<![endif]-->

Here is how my new section looks in Outlook Windows:

New Section


Solution

  • Outlook Windows only accepts padding on <td> elements. For <p>, it will only accept margins.

    So for the top one for example you could just change padding to margin in the <p> like so:

    <td style="padding: 0 20px 0 20px; text-align: center;">
                        <p style="font-size: 16px; font-weight: bold; margin: 10px 0 5px 0;">Title / Teitl</p>
                    </td>