HTML margins not supported in Outlook

Question

I am developing an email template which has the spacing as dynamic, so I made the position as margin, for example:

<td width="264px" bgcolor="#9ac5db" style="font-family:arial;font-size:12px;color:#000000;padding: 10px 5px 30px;" valign="top">
    <div name="nltitle" id="nltitle" style="font-family:arial;font-size:14px;color:#000000;display:block;text-align:center;margin:15px 0px 15px 0px;"><b>Test App</b></div>
                             
    <hr width="100%" color="#ffffff" size="3px">
                                         
    <div style="margin:10px 10px 30px 10px;text-align: left">
        Test App       
    </div>                             
</td>

Here I used padding and margin for setting the spaces dynamically, but it is not working in Outlook. How can I fix this issue? Any Help is highly appreciated.

Cheers,

George

For html e-mail templates use only tables if you want the same look in most e-mail clients ;) BTW you didn't close `style` tag with `"` in the first line before `valign="top"`. — Milan and Friends, Dec 03 '13 at 09:59
@mdesdev.I forget to put that (") in the question. Is there any other method for the replacement of padding and margin because it is not working in outlook( this is because I am generating the spacing dynamically) — George Viju, Dec 03 '13 at 10:03
"Replacement of padding and margin?" you could add ` ` where you want top/bottom spacing also dont forget properties like `colspan` & `rowspan`. — Milan and Friends, Dec 03 '13 at 10:09
More info about margin word around https://litmus.com/help/email-clients/outlookcom-margins/ — John Magnolia, Apr 12 '14 at 11:38

score 38 · Accepted Answer · answered Dec 03 '13 at 13:51

38

Margin is not supported in Outlook.com, so typically you should avoid it in html email design. Instead use padding or spacer table cells with   like mdesdev suggests.

A few other tips:

You should remove the 'px' in your width="" declarations
Add fallback fonts as non-windows users don't have Arial
Instead of CSS text-align:left;, use HTML align="left"
You don't need the divs, you can use all tables
You may have to separate your shorthand padding values into padding-top, padding-bottom etc. From memory I think there might be issues writing them short hand in some email clients.

More info than you asked for, but I hope it helps...

answered Dec 03 '13 at 13:51

John

11,985
3
45
60

1

This seemed to work across most outlooks ' ' to create spaces. – Dr Upvote Apr 10 '15 at 18:23
Actually, you shouldn't use `width=` or `align=` but use CSS instead. Here's some documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td – Cthulhu Jun 30 '15 at 13:58
4

@Cthulhu you are incorrect. HTML email does not follow current web standards. Here are a [bunch of references](http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails/21437734#21437734) on HTML email best practices – John Jul 01 '15 at 14:06
1

@John Thank you for that link, a lot of useful resources. – Cthulhu Jul 01 '15 at 14:20
1

@John Does padding works in html emails ? In my knowledge, I don't think so it works for html emails. – flash Jun 26 '18 at 16:16
@user5447339 Padding does but margin doesn't (for the most part). You just have to declare them separately instead of a single short-form `padding` declaration. – John Jun 26 '18 at 19:52

score 2 · Answer 2 · edited Mar 03 '16 at 13:14

2

the answer is simple

instead of this give

margin:10px 10px 30px 10px;

please use this

Margin:10px 10px 30px 10px;

and also Mr.George using div is not a good

edited Mar 03 '16 at 13:14

Bhargav Rao

50,140
28
121
140

answered Mar 03 '16 at 13:12

Jomin George Paul

523
6
6

HTML margins not supported in Outlook

2 Answers2

Linked