Margin in html not working in Outlook

2019-02-22 10:24发布

问题:

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

For Eg:

<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

回答1:

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



回答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