Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

CSS Padding in Outlook 2007 and 2010

Posted April 4, 2011 by Michelle Klann

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

For those of you who design and develop HTML emails for Outlook 2007 and 2010, you already know that you are bound by tables and you have very limited CSS support. What you might not realize is that these two email clients convert your code from something legible into a seemingly foreign Microsoft language.

One of the more critical conversions that you should be aware of is that Outlook 2007 and 2010 will often move your CSS from div's and headings into nested paragraph and spans. Sometimes, it keeps the outer container, other times it eliminates it entirely.

For example this:


<h2 style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">
   NEW FASHIONS
</h2>
<div style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">
   NEW FASHIONS
</div>
<p style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">
   NEW FASHIONS
</p>

Will get converted to:


<style>
p.MsoNormal, li.MsoNormal, div.MsoNormal
 {mso-style-unhide:no;
 mso-style-qformat:yes;
 mso-style-parent:"";
 margin:0in;
 margin-bottom:.0001pt;
 mso-pagination:widow-orphan;
 font-size:12.0pt;
 font-family:"Times New Roman","serif";
 mso-fareast-font-family:"Times New Roman";
 mso-fareast-theme-font:minor-fareast;}

h2
 {mso-style-priority:9;
 mso-style-unhide:no;
 mso-style-qformat:yes;
 mso-style-link:"Heading 2 Char";
 mso-margin-top-alt:auto;
 margin-right:0in;
 mso-margin-bottom-alt:auto;
 margin-left:0in;
 mso-pagination:widow-orphan;
 mso-outline-level:2;
 font-size:18.0pt;
 font-family:"Times New Roman","serif";
 mso-fareast-font-family:"Times New Roman";
 mso-fareast-theme-font:minor-fareast;}

 

p {mso-style-noshow:yes; mso-style-priority:99; mso-margin-top-alt:auto; margin-right:0in; mso-margin-bottom-alt:auto; margin-left:0in; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast;} </style> <h2 style='margin:0in;margin-bottom:.0001pt'>    <span style='font-size:11.5pt; mso-fareast-font-family:"Times New Roman"'>        NEW FASHIONS        <o:p></o:p>     </span> </h2> <div>    <p class=MsoNormal>      <b>      <span style='font-size:11.5pt;mso-fareast-font-family:"Times New Roman"'>        NEW FASHIONS        <o:p></o:p>      </span>    </b>    </p> </div>< <p style='margin:0in;margin-bottom:.0001pt'>    <b>      <span style='font-size:11.5pt'>        NEW FASHIONS        <o:p></o:p>      </span>    </b> </p>

The Problem

As you can see, this conversion moved our CSS from its original box element container to an inline SPAN element and the padding was ignored.

Solutions

One work-around is to avoid padding in block element containers and use margins instead.


<h2 style="font-size: 15px; font-weight: bold; margin-left: 5px; margin-right: 5px; margin-bottom: 5px;">
   NEW FASHIONS
</h2>

Note: I did not include the "margin" nor "margin-top" properties in this example because they are not supported by Hotmail.

After extensive testing, we have confirmed that the padding property is supported in TD's. So another fix is to move your padding into the containing TD, for example:


<td style="padding: 17px 0 0 0">
    <h2 style="font-size: 15px; font-weight: bold; margin: 0">NEW FASHIONS</h2>
</td>

Comments

Flash Website Templates pic
Flash Website Templates
Great Post! I was not aware of it, I am using outlook 2007 and happpy to find information on CSS padding here. Thanks for sharing the useful post.
Posted 05/31/2011

burberry scarf pic
burberry scarf
thanks! useful!
Posted 11/25/2011

Jonathan Wong pic
Jonathan Wong
Thanks for your post. I was trying to figure out why certain HTML element padding properties are being ignored exclusively on 2007 and 2010.

I ended up returning back to my simple full table formatting for padding, instead of defining padding for a particular td, I define a containing table and empty cells with spacer images for exact pixels padding effect. But this information did allow me to take my email templates to a more updated approach. and I will be quoting this post in my blog.
Posted 02/14/2012

Ed pic
Ed
The problem we have is there's no padding around images BUT... the images and text around them is from a feed, so we cannot break the images out into another TD, we have to apply a class to the entire span. margin-right didn't work :-( We have spent hours and hours trying to find a solution...
Posted 03/08/2012

Dan Filk pic
Dan Filk
Thank you for this. Crazy Email messages. Saved me a bunch of time.
Posted 02/22/2013

matt pic
matt
hy. you can also use line-height for the top and bottom padding. and maybe some   at the left side...
Posted 04/29/2013

PKHunter pic
PKHunter
Margins are the worst idea -- Outlook.com, and many other clients do NOT support them. Padding is supported, but sketchily.

@Matt, the idea to use line-height is a nice one, but that's only for vertical padding. How about horizontal padding?
Posted 08/22/2013

matt pic
matt
hy,

if you have handwritten newsletters you can help yourself with "& n b s p ;" forced whitespaces... ugly but simple solution wink
Posted 08/22/2013

Katrina Isabelle pic
Katrina Isabelle
"After extensive testing, we have confirmed that the padding property is supported in TD's."

You are a godsend! Thank you!
Posted 10/07/2013

Laurent (Khoudj) pic
Laurent (Khoudj)
The best solution, tested on 30 mail clients, is to use table and the property cellpadding :

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="20" cellspacing="0">
<tr>
<td>Title with padding</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><!-- CONTENT --></td>
</tr>
</table>
Posted 08/27/2014

Comment via our Blog

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!