1

I'm trying to create a custom code style in Outlook (with a dark background). I have it almost how I want it, except I would like some padding around the text if possible.

I don't see an actual Padding setting, but by adding a border, I thought I could achieve the same effect:

enter image description here

However, when I go to send the email, it looks like this to the people receiving it (and in my sent items):

enter image description here

Does anyone know why this is happening and if there's a way I can solve it either with the border, or another technique (padding would be nice)?

Thanks

1 Answer 1

1

From Why aren’t my margins working in Outlook.com? :

Outlook.com no longer supports the following CSS properties: margin, margin-top, margin-right, margin-bottom, margin-left.

Replacing margin with padding on paragraph tags works well in Outlook.com, but Microsoft’s desktop clients didn’t fare so well: Outlook 2007/2010/2013 don’t support padding on block level elements.

So margins work in the desktop version, but padding does not. And in Outlook.com padding works, but not margins. A margins or padding solution is therefore only possible if you and your receivers use only one of the Outlook flavors.

In extremity, the article recommends using tables as the all-around solution :

Use <TD> and swap margin for padding

Placing each block of text or image inside its very own <td> cell — along with inline CSS padding — nets the best results across major email clients. While web development purists are rightfully hesitant to sully their emails with non-semantic markup, this method has worked well for us over the years. And while padding doesn’t work quite the same way as margin, it gets the job done. Just be especially careful when using borders, since you’ll need to play around with nesting tables to get your desired effect while relying solely on padding.

3
  • Thank you. A couple questions: 1) is there a way to edit the CSS for my styles in Outlook? I'm very comfortable with CSS, but not so much with Outlook. I don't see a way to edit the underlying CSS in the Modify Style dialog. 2) Can I edit an HTML template (for the <td> solution) for a style in Outlook? 3) (not really a question...) I still can't figure out why my border (with the same color to appear like "padding") doesn't work right after being sent... argh. Thanks, I think you've put me on the right track... Apr 1, 2015 at 9:50
  • Outlook supports something roughly equivalent to IE5-compatible HTML, so I wouldn't try to get too fancy. Better use only inline CSS, and tables are still the most consistent feature across all email clients. For the full story of what works or not in all email clients see the The Ultimate Guide to CSS. The Premailer website can help by parsing pure HTML to convert all into inline styles and give a list of CSS warnings on dangerous stuff and for which email client.
    – harrymc
    Apr 1, 2015 at 10:23
  • Or you can use MailChimp to design your emails right within their web editor and it will do its best to make it look good in all email clients. It's free for 12,000 emails to 2,000 subscribers.
    – harrymc
    Apr 1, 2015 at 10:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .