Search code examples
cssoutlookgmailhtml-emailemail-templates

How can I set the same padding left in my template for Outlook & Gmail Emails?

this is a simple problem, I set a padding left of 15 pixels in my code in my ul element, the padding does not look the same at all in the two platforms ( gmail & outlook )

<ul style="padding-left: 15px !important; margin: 0 !important;">
    <li
       style="text-align: left !important; font-size: 14px; font-family: Helvetica, sans-serif, sans-serif !important;">
       <span
          style="color: #055151; line-height: 150%; font-family: Helvetica, sans-serif;">
          Exemple de liste à puce</span>
    </li>
 </ul>

This how it looks in gmail :

enter image description here

And how it looks in outlook :

enter image description here

Not mentionning that there is a difference on mobile apps too.

Is there a way to fix this easily ? I am looking for something like in the Outlook version!

I need compatibility on those two platforms alone, no need to yahoo or something else!

Any help would be much appreciated really!!!

Solution

  • The problem is that each email client has different defaults, and also, there are further quirks like how Outlook ignores styling in the <ul>/<ol>. Therefore, we need to reset the defaults across all elements.

    Also, for consistency, we must specify margins only in the <li> items. Not padding, and not the <ul>/<ol>.

    <ul style="margin:0;padding:0;">
    <li style="margin:0 0 0 30px;padding:0;">Point 1</li>
    <li style="margin:0 0 0 30px;padding:0;">Point 2</li>
    <li style="margin:0 0 0 30px;padding:0;">Point 3</li>
</ul>

    Then, for Outlook desktops, we must fix the text-indent. Add the following in the <head> section:

    <!--[if gte mso 9]>
<style>
li {
    text-indent:-1em;
}
</style>
<![endif]-->

    Now, if you wanted some space between the items, and at the top and bottom of the list, you could do the following:

    <ul style="margin:0;padding:0;">
    <li style="margin:20px 0 3px 30px;padding:0;">Point 1</li>
    <li style="margin:3px 0 3px 30px;padding:0;">Point 2</li>
    <li style="margin:3px 0 20px 30px;padding:0;">Point 3</li>
</ul>

    This gives 20px above and below the list, and 6px in-between each list item (3 + 3). The 30px margin is the margin from the left.