Do vertically adjacent margins collapse properly in email?

I'm trying to code an email template that involves a section with a heading and then some body text under it. I obviously want space between the heading and the body text, and between the paragraphs of body text if there are two or more. And this is all taking place within a table that has a different background color from the main background of the email, so I have table rows above and below this to safely add "fake" padding to the table.

Because the table "padding" is handled that way, I really don't want to have any additional space above my heading or below my last paragraph of body text. If I were designing for the web I would just style those elements so the heading has a margin-bottom only and the body paragraphs have a margin-top only, because the two margins between the heading and the first body paragraph should "collapse" (i.e. only the larger of the two margins should be used) according to W3C standards.

Has anyone done any testing to find out how various email clients handle vertically adjacent margins like that? If they don't end up collapsing properly I'll end up with an enormous gap between my heading and my body text, but since last-child support is pretty much non-existant, the only other option I can think of is to manually set the margin-bottom on every "last paragraph" in every email to 0, which will get tedious. (And, let's be honest - I'll forget one eventually, or even worse, add an extra paragraph and forget to remove that style from the no-longer-last paragraph!)

So, has anybody tried a layout that relied on collapsing margins, and if so, did it seem to work?

Thanks in advance for any insight!

roshodgekiss roshodgekiss, 3 years ago

Hey there, mrmarkham! While I haven't experimented with collapsing margins in email explicitly, I would be very wary of trusting them at all, especially given that they're not supported in In my opinion, your best bet is to use padding-bottom on headings and paragraphs universally and be ready for a bit of inconsistency. For example:

p { padding-top: 0; padding-bottom: 18px; }
p:last-child { padding-bottom: 0; }

Sadly, this is email - things will never be 100% consistent from email client to client. But if we do find a solid workaround, we'll be sure to pass it on.

Get in touch with us on Twitter:
We're also on Facebook:
mrmarkham, 3 years ago

Thanks for the advice! That does seem to be the best way to go.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free