css padding is not working in outlook

Question

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?

Solution 1

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>

Solution 2

Unfortunately, when it comes to EDMs (Electronic Direct Mail), 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.)

Solution 3

Avoid paddings and margins in newsletters, some email clients will ignore this properties.

You can use empty tr and td as was suggested (but this will result in a lot of html), or you can use borders with the same border color as the background of the email. so, instead of padding-top: 40px you can use border-top: 40px solid #ffffff (assuming that the background color of the email is #ffffff)

I've tested this solution in gmail (and gmail for business), yahoo mail, outlook web, outlook desktop, thunderbird, apple mail and more. As far as I can tell, border property is pretty safe to use everywhere.

Example:

<!-- With paddings: WON'T WORK IN ALL EMAIL CLIENTS! -->
<table>

    <tr>

        <td style="padding: 10px 10px 10px 10px">
            <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result with borders and same border color of the background -->
<table>

    <tr>

        <td style="border: solid 10px #ffffff">
           <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result using empty td/tr. (A lot more html than borders, get messy on large emails) -->
<table>

    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>


    <tr>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

        <td><!--Content goes here--></td>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

    </tr>


    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>

</table>
<!-- With tr/td every property is needed. height must be setted both as attribute and style, same with width, line-height must be setted JIC default value is greater than actual height and without the &nbsp; some email clients won't render the column because is empty. You can remove the colspan and still will work, but is annoying when inspecting the element in browser not to see a perfect square table -->

In addition, here is an excelent guide to make responsive newsletters without mediaqueries. The emails really works everywhere:

https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

And always remember to make styles inline:

https://inliner.cm/

To test emails, here is a good resource:

https://putsmail.com/

Finally, for doubts about css support in email clients you can go here:

https://templates.mailchimp.com/resources/email-client-css-support/

or here:

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

Solution 4

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>

Solution 5

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

View more solutions

Comments

[Mukesh]

In which element I need to use this?

[Carol McKay]

the span that you are putting the padding in, in fact both spans would be a good idea.

[monners]

Actually padding and margin is supported in some email clients

[John]

Padding is supported in all, margin is not supported in some clients (outlook.com, Lotus Notes)

[Cthulhu]

@John Actually you can use margin in outlook.com if you write it with capital M (Margin: 10px; instead of margin: 0px;).

[Cthulhu]

@CarolMcKay display won't work in MS Oulook nor Gmail.

[Aur Saraf]

HTML email is such a horrible field that I'm not sure if @Cthulhu is trolling here :(

[Cthulhu]

@AurSaraf Not trolling, just had to code too many e-mails and newsletters. You can test Margin: 10px;, it works without issues. Here's a resource: emailonacid.com/blog/article/email-development/…

[JaidynReiman]

I just tested this myself, it definitely works. I'm not sure if its the best thing to rely on, its probably something that they'd discover and get rid of later.

[revelt]

cellpadding on <table> is unreliable, just like cellspacing. It's best to use padding on <td>

[revelt]

Padding will work on Outlook, provided you follow best practice — nest everything in separate tables and/or td's (columns). Instead of two span's there should be a single table with 2 td's.

[revelt]

@AurSaraf I'm a professional email developer and I can say coding email is easy. Regarding padding/margin — set padding only on TD's. Never use margin attribute (maybe on media query styles on mobiles, but definitely not for email code part for desktop clients).

[revelt]

It's a bad idea. Use a nested table.

[godblessstrawberry]

thanks for pointing to images, this will definitelly work. btw for those who are looking for proper images - placehold.it is a really good source e.g. placeholdit.imgix.net/…

[Admin]

Since this answer relies on images, what happens when images are blocked? Will red X icons appear in place of those tiny images?

[GDY]

Had to suppres the impulse to vote down on this topic because outlook sucks ... but good answer so +1

[Ishmael]

What is an EDM?

[Karan Chadha]

I wish I could do +100. Such problems related to peculiarities of particular product are particularly hard to resolve.

[Karan Chadha]

BTW - I managed to resolve w/o image by using "% width" for td in table

[niltoid]

would be brilliant if it worked - didn't solve on outlook.com

[Bsalex]

Please state what has been changed. Don't force users to use diff tools.

[Craig1123]

@Ishmael EDM stands for Electronic Direct Mail which utilizes multiple forms of communication to relay and reinforce email campaign messages. digitalthing.com.au/what-are-edms-and-email-marketing-campai‌​gns

[Nosajimiki]

Be careful using image spacers. Many email clients can be set to block images by default which could totally wreck your formating. Generally, your emails should still be readable with all images replaced with missing image tags

[Matt Cosentino]

@Craig1123 That makes a lot more sense than electronic dance music. ;)

[OutstandingBill]

Seems to work on my version of Outlook. Thanks Jacob!

[scp]

This worked in Outlook365 when nothing else seemed to

[Mike]

Just tested in Outlook 365 (v16.0.12527), and I found that applying a border to my H2 style like this: h2 { border-top: solid 100px #ffffff; } does add a few pixels border (perhaps 8?) but not the 100px I am specifying. I tried this many times with different values, always the same ~8px border.

[Nathan]

Padding must go on <td>s for cross-email compatibility, not <span>s.

[MadMac]

Does not work in Outlook. Man outlook is a piece of cr@p.