Menu icon Foundation
Bottom Margin in Outlook 2010

Is anyone else finding that Outlook 2010 seems to only randomly honor the bottom margin value on <p> tags?  I don't have a problem with headings or lists, for example, but most paragraphs do not have the bottom margin.  My inlined HTML code is being generated through the online inliner (v2).  Any ideas how to enforce that bottom margin?

foundation emailoutlook 2010

Is anyone else finding that Outlook 2010 seems to only randomly honor the bottom margin value on <p> tags?  I don't have a problem with headings or lists, for example, but most paragraphs do not have the bottom margin.  My inlined HTML code is being generated through the online inliner (v2).  Any ideas how to enforce that bottom margin?

Rafi Benkual over 3 years ago

Hi Chris,

Haven't seen this one before. In Foundation for Emails 2 we are using margin on p tags.

Outlook 2007 and 2010 do not support "padding" in paragraphs.

Are you seeing no margin bottom or are you custom values not being added?

Just ran a test to make sure: https://litmus.com/checklist/emails/public/681079a

Chris Borgmeyer over 3 years ago

We're seeing no margin at the bottom of paragraphs.  We have not added custom styles.  I believe all the necessary styles are being inlined.  Here's an exmaple of what the inliner is applying to <p> tags:

style="Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;"

Seems a little redundant but the margin-bottom style is there.

Rafi Benkual over 3 years ago

Just trying to eliminate factors. Are you using the web inliner or the ZURB Stack `npm run build`?

There is a reset applied to remove margin bottom but the declaration comes before the paragraph margin-bottom:

body,
table.body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
td,
th,
a {
  color: $global-font-color;
  font-family: $body-font-family;
  font-weight: $global-font-weight;
  padding: 0;
  margin: 0;
  Margin: 0;
  text-align: left;
  line-height: $global-line-height;
}

Rafi Benkual over 3 years ago

Try removing the p tag here and see if it helps.

Chris Borgmeyer over 3 years ago

Rafi,  Removing that p tag had no effect.  We are using the web inliner.  Unfortunatly, the ZURB stack is not a good option for this particular client's needs.

Just to make sure it wasn't our email service, I loaded a test into Mailchimp.  Same result.  No bottom margin rendering on some of the p tags.  And, that's the strange thing.  Why do some p's render with a bottom margin and others do not?

I'm going to try a test with your old eb inliner next just to compare the output.

Corey Schaaf over 3 years ago

According to the Mastering Foundation for 2 Emails class, when referncing a margin, you must also include

Margin (with a captial "M"). 

so if you wanted to add margin to the bottom you would write the following:

.my-class{

margin-bottom:0px;

Margin-bottom:0px;
}

 

Rafi Benkual over 3 years ago

Hey Corey you're right! The capital M is a fallback for Outlook.com (formerly Hotmail) but doesn't do anything on other clients/browsers.

I think Chris is referring to his margin is being stripped out by the inliner. Unfortunately I was not able to replicate this but I am curious about the specificity of inlined styles with other inline styles. Chris, from your posted code example it looks like that would cause an issue.

What if you used the v1 inliner? http://foundation.zurb.com/emails/inliner.html

Eric Smith over 1 year ago

Why isn't the v1 inliner working? It hasn't worked in months.