html电子邮件的速记CSS可能吗？

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

In case this is still of interest I have been looking into this lately. Some mass mail company clearly state that some applications like font (at least) are not rendered well on some email clients.

http://www.campaignmonitor.com/resources/will-it-work/guidelines/

Actually after reviewing a few email sources of templates (Mailchimp, Campaign Monitor, etc) they all consistently avoid them so my conclusion so far is been to do so as well.

In any case more important than shorthand or not is the fact that most CSS styles need to get "inline" of elements as many (Gmail included) ignores them if defined on the head.

As a simple solution I tend to use basic styles on the body element and on a containing table surrounding the content (as body styles also get removed by some clients).

Answer 3

在最简单的形式中，您可以为每个元素设置样式，如下所示：

<p style="padding:0 4px 0 6px;">your contents</p>

Answer 4

Yes.

And, as with any "webpage", what the user actually sees is completely up to the "browser" (or HTML-capable email client).

You could have simply tried it to find out.

_{Also, I recommend not being obnoxious by splashing graphics and colours all over emails. :(}

Answer 5

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.