CODEWITHSUNDEEP
htmlcssemailoutlookmargin
George Viju
George Viju

Reputation: 423

HTML margins not supported in Outlook

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

Upvotes: 15

Views: 55930

Answers (2)

Jomin George Paul
Jomin George Paul

Reputation: 569

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

Upvotes: 3

John
John

Reputation: 12193

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

Upvotes: 41

Related Questions