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

We've compiled 4 in-depth posts on Outlook, including this blog on CSS Padding in Outlook 2007 & 2010, into an extensive series surrounding this client and its vexing quirks.

Get the Whole Series in One Click...

Designing for Outlook is like chasing the ever elusive White Whale. We spend hours pursuing it, tracking down bugs and glitches, trying to achieve pixel perfection in a distinctly imperfect environment. We’ve spent hours testing to ensure we’ve worked out all the Outlook kinks and we're sharing our years of experience coding for this pesky email client in one, exhaustive guide below.

Click the 'Download Your Guide' button below to gain access to the full series on Outlook 2007, 2010 & 2013 and their infamous word rendering engines!

 

Outlook Isn't Going Anywhere...

We broke up this topic into 4 in-depth chapters so you can achieve pixel perfection in this irksome client.

This guide consists of the following Outlook tutorials:

Be sure and comment below if you have any tips or tricks to make coding and designing emails for Outlook a wee bit less painful.

Access Your Outlook Coding Guide! Your subscription to our list has been confirmed.

Click here to access your Outlook rendering guide at any time! new one: http://eepurl.com/7feAn Old one: http://eepurl.com/1KJ59 http://emailonacid.us1.list-manage1.com/subscribe/post?u=b6418bd90c647b0ab5f294717&id=78f32d8b72

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!