Capitalize the "M" in "Margin", to force proper margins in Outlook.com

[lembitk]

• Force Outlook.com to center the main container <td>.
• Force proper margins for <h1>, <h2>, <h3> headings in Outlook.com.
• In 'billing.html', also force Outlook.com to center the <table class="invoice"> and add proper top, bottom margins.
• In 'styles.css', add CSS comments warning how CSS inliners will uncapitalize "margin", so it has to be actually (re-)capitalized by hand in final emails.

Closes #18.

[idmontie]

Wouldn't fixing this in the Premailer be better than applying it here?

There is already an issue open for this too: https://github.com/premailer/premailer/issues/276

[lembitk]

Thanks @idmontie, I see your point, but do not agree.

• Even if this will get fixed in Premailer (and all the other CSS inliners out there), you firstly obviously have to explicitly write it as such, capitalized as Marginin your CSS.
• A rhetoric question: should we also fix it then in every other CSS-inliner out there?
  • I tested, and can confirm that also Foundation for Emails (Inky's), MailChimp's inliners will uncapitalize margin.
  • That's why I feel it's good to have it documented in this project – straight in the CSS comments, as proposed in this PR (and also maybe later in the 'README' file).
• It is more about how one chooses to code his emails, less (if at all) about which CSS inliner gets chosen. It is a choice one makes: “will I support Outlook.com or not?” Premailer is just one out of many CSS inliners out there.
• As you could observe in my testing screenshots, although such a tiny trick, it affects quite a lot the 'billing.html' template in Outlook.com.

With all that said – thanks for the insightful comment. It sure would be great if Premailer would add an option for preserving capitalization (and other arbitrary/non-standard/unexpected markup).

P.S. I personally think that the best way to resolve this would be at the build process level – e.g. in a Gulpfile accompanying the templates, after running the CSS inliner, re-capitalize the Margin CSS rule names in the final markup.

[leemunroe]

LGTM :shipit: