85

I have the following html in an 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>

In Gmail In gmail

In Outlook In outlook

How to fix this?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Mukesh
  • 7,630
  • 21
  • 105
  • 159
  • As a start you could try to affect all elements with *{margin: 0; padding: 0;} in your extrernal style sheet. I use to do this when debugging. Then set margin/padding locally on the individual elements (as you already have). – Hauns TM Jan 31 '14 at 07:07
  • Sorry if this isn't relevant - I'm new to HTML - but I've just had some success with margin `

    ` which I found out by viewing email source after I set it up the way I wanted it.

    – SSlinky Aug 23 '16 at 10:34

15 Answers15

80

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.)

s3m3n
  • 4,187
  • 1
  • 28
  • 24
monners
  • 5,174
  • 2
  • 28
  • 47
  • 2
    thanks for pointing to images, this will definitelly work. btw for those who are looking for proper images - http://placehold.it is a really good source e.g. https://placeholdit.imgix.net/~text?txtsize=5&bg=f6f6f6&w=15&h=1&txtpad=1 – godblessstrawberry Nov 09 '16 at 11:07
  • 1
    Had to suppres the impulse to vote down on this topic because outlook sucks ... but good answer so +1 – GDY Nov 16 '17 at 08:47
  • 22
    What is an EDM? – Ishmael Jan 16 '18 at 17:40
  • I wish I could do +100. Such problems related to peculiarities of particular product are particularly hard to resolve. – Chesser Mar 13 '18 at 00:41
  • 1
    BTW - I managed to resolve w/o image by using "% width" for td in table – Chesser Mar 13 '18 at 00:43
  • 1
    @Ishmael EDM stands for Electronic Direct Mail which utilizes multiple forms of communication to relay and reinforce email campaign messages. https://www.digitalthing.com.au/what-are-edms-and-email-marketing-campaigns/ – Craig1123 Dec 19 '18 at 18:16
  • 4
    @Craig1123 That makes a lot more sense than electronic dance music. ;) – Matt Cosentino Mar 26 '19 at 23:21
37

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 (assuming a white background-color) -->
<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 using borders, 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 because the default value may be greater than the wanted height.
- The "&nbsp;" is there because some email clients won't render empty columns. 
- You can remove the "colspan" and still will work, but is cleaner, especially when inspecting the element in the browser's console.
-->

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. This is important because some email clients does not support the <style> tag:

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/


EDIT:

For problems using borders in outlook you may try adding this snippet to your email head (outlook supports <head> tag):

<head>
    <!--[if mso]>
    <style type="text/css">
        table {border-collapse:collapse; border-spacing:0; margin:0}
        div, td {padding:0;}
        div {margin:0 !important;}
    </style>
    <![endif]-->
</head>

Outlook assumes borders of the table cells should not overlap unless using border-collapse:collapse in the table styles.

Sachi Cortes
  • 884
  • 1
  • 11
  • 12
  • 1
    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. – Mike Mar 08 '21 at 21:47
  • 5
    Does not work in Outlook. Man outlook is a piece of cr@p. – MadMac Sep 28 '21 at 23:50
  • 1
    The border thickness will only be as thick as the container itself in Outlook. In other words, if you apply a `100px` border thickness, then Outlook will only present as much of the border as it can display for the current element's container. To me, this feels like the old IE box model. The trick is to specify a height for the containing element, usually a table or td for Outlook. – Metro Smurf Jul 27 '22 at 21:35
  • Borders hack worked for me, but in OWA (Outlook Web App) the background color got modified in Dark Mode and I could see different shades of color. Adding `!important` didn't help. Looks like OWA doesn't modify border colors in dark mode. – bmakan Jul 27 '23 at 13:19
24

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>
Mukesh
  • 7,630
  • 21
  • 105
  • 159
11

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>
Rahul J. Rane
  • 246
  • 1
  • 8
  • 1
    Actually padding and margin *is* supported in some email clients – monners Jan 31 '14 at 08:49
  • 4
    Padding is supported in all, margin is not supported in some clients (outlook.com, Lotus Notes) – John Jan 31 '14 at 16:13
  • @John Actually you can use margin in outlook.com if you write it with capital M (`Margin: 10px;` instead of `margin: 0px;`). – Cthulhu Oct 28 '15 at 09:58
  • 3
    HTML email is such a horrible field that I'm not sure if @Cthulhu is trolling here :( – Aur Saraf Feb 29 '16 at 15:48
  • 1
    @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: https://www.emailonacid.com/blog/article/email-development/outlook.com-does-support-margins – Cthulhu Feb 29 '16 at 15:57
  • 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. – JaidynReiman Mar 30 '16 at 16:25
  • 7
    @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 Aug 26 '16 at 14:17
  • 3
    Since this answer relies on images, what happens when images are blocked? Will red X icons appear in place of those tiny images? –  Feb 24 '17 at 22:52
7

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

Raj_89
  • 691
  • 6
  • 5
  • 9
    `cellpadding` on `` is unreliable, just like `cellspacing`. It's best to use padding on `
    `
    – revelt Aug 26 '16 at 14:10
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!!!

Subbu
  • 191
  • 2
  • 10
  • 1
    Padding _will_ work on Outlook, provided you follow best practice — nest everything in separate `table`s and/or `td`'s (columns). Instead of two `span`'s there should be a single table with 2 `td`'s. – revelt Aug 26 '16 at 14:12
6

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

Jacob
  • 187
  • 3
  • 7
3

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 &nbsp;'s.

John
  • 11,985
  • 3
  • 45
  • 60
3

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

Fab
  • 31
  • 1
1

In some cases we set border instead of padding and it works in outlook.

border: solid #efeeee;border-width: 20px 40px;
Ishan Fernando
  • 2,758
  • 1
  • 31
  • 38
1

Make sure to throw on the !important for Outlook especially.

td {
border-collapse: separate;
padding: 15 !important
}

I also wanted borders, so might not work for someone who doesn't.

Ali
  • 2,702
  • 3
  • 32
  • 54
Carliczyk
  • 11
  • 2
0

have you tried display:inline-block;?

Carol McKay
  • 2,438
  • 1
  • 15
  • 15
0

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>
Richard Clifford
  • 494
  • 3
  • 17
  • 2
    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 – Nosajimiki Mar 15 '19 at 22:06
0

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>
ekhumoro
  • 115,249
  • 20
  • 229
  • 336
Ahmed Shahin
  • 102
  • 4
0

I believe that we can use margin in <p> to provide space between the elements in Windows Outlook clients if we also use mso-line-height-rule:exactly; before line-height.

<p style="font-size:12px; mso-line-height-rule:exactly; line-height:1.00; margin:0 0 1em 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum nunc feugiat porta conseswctetur. Sedi dolor.</p>

<p style="font-size:12px; mso-line-height-rule:exactly; line-height:2.00; margin:0 0 2em 0;">Phasellus convallis, mauris ac vehicula posuere, ligula magna mattis ipsum, in sollicitudin nuddibh lacus eget sapien.</p>

<p style="font-size:12px; mso-line-height-rule:exactly; line-height:3.00; margin:0 0 4em 0;">Id semper sem pharetra vel. Sed ut erat auctor lectus pretium blandit gravida vitae enim. Nullam eget ex semeerst.</p>

Litmus Outlook 2016 (Win 7) Preview

Litmus Outlook 2019 (Win) Preview

Litmus Outlook 365 (Win)

Jay Chow
  • 1
  • 1