How can I set padding left in my template that works both for Outlook & Gmail Emails?

user_15229188 0
Viewed 103

I set a padding left of 15 pixels in my code in my list element, the padding shown does not look the same in the two platforms.

<ul style="padding-left: 10px !important; margin: 0 !important;">
    <li
       style="text-align: left !important; font-size: 14px; font-family: bold, sans-serif, sans-serif !important;">
       <span
          style="color: #055151; line-height: 150%; font-family: bold, sans-serif;">List element</span>
    </li>
 </ul>

How to achieve this ?

html-email css email
1 Answers

The Outlooks on Windows use Word as a rendering engine for HTML and CSS. I see two things that could be problematic here:

  • Inline !important styles are not supported.
  • Word uses text-indent to actually position the list item marker. In order to avoid impacting other email clients, we can use mso-text-indent-alt that will apply specifically to the Outlooks using Word's rendering engine.

Here’s an example code that should match what you want to achieve:

<ul style="padding:0; margin:0 0 0 10px;">
    <li style="mso-text-indent-alt:-0.75em; text-align:left; font:bold 14px sans-serif;">
        <span style="color:#055151; line-height:150%;">List element</span>
    </li>
</ul>

And here are test screenshots on Email on Acid.

user_134634210
Related