Shorthand CSS on html emails possible?

Question

I am wondering if shorthand CSS coding is allowed for HTML Emails.

I know the CSS allowed is very limited but I know padding for example is allowed but would this be allowed:

padding:0 4px 0 6px;

Answer 1

The CSS that is allowed in an email is what the receiving email client understands. There are many different email clients. Not all of them even render HTML email (though virtually all do these days), but even where they do render HTML, their rendering engines will all be different from one another, in the same way as web browsers. But unlike web browsers, people don't always change their email client if they're not happy with the way it renders.

So you should expect your email to be read using virtually any kind of email program, including ones which don't render HTML at all, and those which render it, but using an IE4-vintage rendering engine.

That said, I would expect virtually all email clients to correctly interpret the CSS padding style.

You may get some with quirks-mode box models, which will cause your box sizes and positions to be wrong, but they should still interpret the padding correctly within their own set of rules.

One thing I would say is that you should ensure all your CSS code is embedded in the HTML. Put a big <style> tag at the top of your document, rather than a <link> tag with an external reference. The reason for this is that 1) some users may view your email when they're offline, in which case they won't be able to load an external stylesheet, and 2) some email clients may be set to block loading external files from within an email for security reasons, even if the user is online. If your styles are all included in the main body of the email, this won't be a problem. (you may still have the same issue with graphics, but that's a whole different topic of discussion)

Answer 2

I have never had a problem doing 'shorthand' like that, so long as all of the values are provided. Technically, padding:0px 4px; should work such that top & bottom are 0, and left & right are 4, but not all email clients will honor that (I'm talking to you, Outlook 2007/2010!) so you need to include all four for margin, padding, border etc.