css padding is not working in outlook

问题:

I have following html in email template.

I am getting different view in MS Outlook and in gmail for the same.

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

How to fix this?

回答1:

Unfortunately, when it comes to EDMs, Outlook is your worst enemy. Some versions don't respect padding when a cell's content dictates the cell dimensions.

The approach that'll give you the most consistent result across mail clients is to use empty table cells as padding (I know, the horror), but remember to fill those tables with a blank image of the desired dimensions because, you guessed it, some versions of Outlook don't respect height/width declarations of empty cells.

Aren't EDMs fun? (No. They are not.)

回答2:

I changed to following and it worked for me

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">                              
        <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">               
            <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>                    
            <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>              
        </table>                    
    </td>
</tr>

Update based on Bsalex request what has actually changed. I replaced span tag

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

with table and td tags as following

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0"> 
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>

回答3:

To create HTML in email template that is emailer/newsletter, padding/margin is not supporting on email clients. You can take 1x1 size of blank gif image and use it.

<tr>
  <td align="left" valign="top" style="background-color:#7d9aaa;">
    <table width="640" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
        <td align="right" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;"><a href="#" style="color:#ffffff; text-decoration:none; cursor:pointer;" target="_blank">Order Confirmation</a></font></td>
        <td align="left" valign="top" width="200"><img style="display:block;" src="images/spacer.gif" width="200" height="1"  alt="" /></td>
        <td align="left" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;">Your Confirmation Number is 260556</font></td>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
    </table>
</td>
</tr>

回答4:

Just use
<Table cellpadding="10" ..> ... </Table>
Don't use px.Works in MS-Outlook.

回答5:

Do this instead:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td bgcolor="#7d9aaa" width="40%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Order Confirmation
      </td>
      <td bgcolor="#7d9aaa" align="right" width="60%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Your Confirmation number is {{var order.increment_id}}
      </td>
  </tr>
</table>

It is better to use two cells and align the content, than using large padding and  's.

回答6:

Padding will not work in Outlook. Instead of adding blank Image, you can simply use multiple spaces(& nbsp;) before elements/texts for padding left For padding top or bottom, you can add a div containing just spaces(& nbsp;) alone. This will work!!!

回答7:

I had the same problem and ended up actually using border instead of padding.

回答8:

After doing many tests in Litmus, i could not find a way to have perfect rendering in all emails readers, but here is the better solution i found :

<table  width="100%" cellpadding="0" cellspacing="0" style="background-color:#333;color:#fff;border-radius:3px;border-spacing:0;" >
    <tr>
        <td style="width:12px;" >&nbsp;</td>
        <td valign="middle" style="padding-top:6px;padding-bottom:6px;padding-right:0;padding-left:0;" >
            <span style="color:#fff;" ><strong>Your text here</strong> and here</span></a>
        </td>
        <td style="width:12px;" >&nbsp;</td>
    </tr>
</table>

In this piece of code, i aimed to emulate padding : 6px 12px;

There are 2 "12px table columns" that handles the right and left padding.

And I'm using "padding: 6px 0;" on my td content, to manage top and bottom padding : Outlook 2010 and 2013 will ignore this and will use their own padding.

The text won't be perfectly aligned in Outlook 2010 and Outlook 2013 (slightly too far from top) but it works with all other email readers i tried : Apple Mail, Gmail, Outlook 2011 (yes..), Hotmail, Yahoo and many more.

Preview image : Outlook 2010 and 2013 preview

Preview image : Gmail, Apple Mail and others

回答9:

have you tried display:inline-block;?

回答10:

My solution is to use an empty / whichever is needed with a transparent spacer gif since padding isnt 100% supported.

<td width="2" style="font-size:1px; line-height:1px;" bgcolor="#FFFFFF">                                                                                                       
   <img width="2" border="0" src="spacer50.gif" style="display:block; 
   padding:0; margin:0; border:none;" />                                                                                                
</td>

回答11:

All styling including padding have to be added to a td not a span.

Another solution put the text into <p>text</p> and define margins, and that should give the required padding.

For example:

<p style="margin-top: 10px; margin-bottom: 10; margin-right: 12; margin-left: 12;">text</p>

回答12:

As monners says some email clients are horrible handling paddings. You can use empty rows and cells as he suggests (with the precaution to set the line-height to 1, if not the line height of the td may be higher than the padding).

I have particulary found another solution, using borders the same colour of the background. I've tested this solution positively in gmail (and gmail for business), yahoo mail, outlook web, outlook desktop, thunderbird and works correctly.

Example:

<table>
    <tr>
        <!--use border same color of bg-->
        <td style="border: solid 10px #ffffff">
           <!--Content goes here-->
        </td>
    </tr>
</table>

<!--Same result with padding-->
<table>
    <tr>
        <!--use paddings-->
        <td style="padding: 10px 10px 10px 10px">
           <!--Content goes here-->
        </td>
    </tr>
</table>

<!--using empty td/tr-->
<table>
    <tr>
        <td height="10" style="height: 10px; line-height: 1px"></td>
    </tr>
    <tr>
        <td width="10" style="width: 10px; line-height: 1px"></td>
        <td>
           <!--Content goes here-->
        </td>
        <td width="10" style="width: 10px; line-height: 1px"></td>
    </tr>
    <tr>
        <td height="10" style="height: 10px; line-height: 1px"></td>
    </tr>
</table>

In addition, here is an excelent guide to make responsive newsletters WITHOUT mediaqueries, I've been using this guide for long now and it's excellent: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

And you can test all your email in: https://putsmail.com/

And always remember to make your css inline, I use: https://inliner.cm/

Finally, if you have doubts about css support you can go here: https://templates.mailchimp.com/resources/email-client-css-support/

or here: https://www.campaignmonitor.com/css/