CSS Padding in Outlook 2007 and 2010
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:
- 17 Must-Know Tricks for Outlook 2007, 2010 and 2013
- 3 Ways to Remove Unwanted Gaps between Tables in Outlook 2007 and 2010
- Fixing Gaps between Your Images in Outlook 2013
- CSS Padding in Outlook 2007 and 2010
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.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
10 thoughts on “CSS Padding in Outlook 2007 and 2010”
Comments are closed.
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.
thanks! useful!
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.
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…
Thank you for this. Crazy Email messages. Saved me a bunch of time.
hy. you can also use line-height for the top and bottom padding. and maybe some at the left side…
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?
hy,
if you have handwritten newsletters you can help yourself with “& n b s p ;” forced whitespaces… ugly but simple solution 😉
“After extensive testing, we have confirmed that the padding property is supported in TD’s.”
You are a godsend! Thank you!
The best solution, tested on 30 mail clients, is to use table and the property cellpadding :