anchor tag removes paragraph margin (Outlook)

[Nikkiez]

Margin on a paragraph is removed or ignored if I insert an anchor tag inside it. Error occurs only in builded version and some Outlook versions. (for example 2007)

Example HTML:

<container>
  <row class="test">
    <columns small="12" large="12">
      <p class="margin-top">This is a test text with a test <a href="#">link</a>.</p>
    </columns>
  </row>
  <row class="test">
    <columns small="12" large="12">
      <p class="margin-top">This is a test text without a test link.</p>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <p class="margin-top">This is a test text with a test <a href="#">link</a>.</p>
      <button class="large" href="http://zurb.com">I am a large button</button>
      <p class="margin-top">This is a test text with a test <a href="#">link</a>.</p>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <p class="margin-top">This is a test text without a test link.</p>
      <button class="large" href="http://zurb.com">I am a large button</button>
      <p class="margin-top">This is a test text without a test link.</p>
    </columns>
  </row>
  <row class="test">
    <columns small="12" large="12">
      <p class="margin-top">This is a test text with a test <a href="#">link</a>.</p>
    </columns>
  </row>
  <row class="test">
    <columns small="12" large="12">
      <p class="margin-top">This is a test text without a test link.</p>
    </columns>
  </row>
  <row>
</container>

Example CSS:

@import 'settings';

$container-background-color: $body-background;

@import 'foundation';

.test {
    background-color: #00AA00;
}
.margin-top {
    margin-top: 20px;
}

Outlook 2003: http://postimg.org/image/6vefno9ez/
Outlook 2007: http://postimg.org/image/wnuhxkgsr/

I changed the following in the _types.scss to fix it.

Original:

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

Changed:

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

body,
table.body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
td,
th {
  margin: 0;
}

Outlook 2003: http://postimg.org/image/7b5ywy5jj/
Outlook 2007: http://postimg.org/image/gndxp4bzb/

[kball]

Hmm... I'm not sure getting rid of the default margin on a tags is the right approach, because that seems like it might have a bunch of other possible side effects... lmc if I can track down what's happening in outlook.

[kball]

Upon digging into this, I believe this is actually simply a practice that does not have good cross-email-client. Margins are completely ignored in outlook.com (https://www.campaignmonitor.com/blog/email-marketing/2013/01/outlook-com-drops-margin-and-float-support-entirely/) and padding and margins are both weird in paragraphs for outlook 2007 & 2010 (https://www.emailonacid.com/blog/article/email-development/7_tips_and_tricks_regarding_margins_and_padding_in_html_emails)

I believe the correct way to get the behavior you're looking for here is to

1. Use padding instead of margin
2. Apply the padding to the td/th (or in inky, the column) tags instead.

Reworking a small part of your example this would look like:

<container>
  <row class="test">
    <columns class="padding-top" small="12" large="12">
      <p>This is a test text with a test <a href="#">link</a>.</p>
    </columns>
  </row>
  <row class="test">
    <columns class="padding-top" small="12" large="12">
      <p>This is a test text without a test link.</p>
    </columns> 
  </row>
</container>

with the css

.test {
  background-color: #00AA00;
}
.padding-top {
  padding-top: 20px;
}

As such, this does not appear to be an issue with F4E per se but rather just an email cross-client best practices question. I'm going to close this issue, but @rafibomb and @tdhartwick do we have a good place in the docs to highlight things like this that might be common gotchas?

[Nikkiez]

Yes maybe that's the better way to deal with it. But it's unusual that an anchor with margin 0 inside a paragraph removes the paragraph margin. I will try your solution. But one more question: Whats the best practices for text with a button between (With space between texts and button.)?

Example:

<container>
  <row>
    <columns class="padding-top" small="12" large="12">
      <p>This is a test text with a test <a href="#">link</a>.</p>
      <button class="large" href="http://zurb.com">I am a large button</button>
      <p>This is a test text without a test link.</p>
    </columns>
  </row>
</container>

And still the setting "$paragraph-margin-bottom" is ignored in the builded version.
Builded paragraph:

<p style="Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"></p>

[ManoID]

Why is this issue closed?
I experience the same issue with any anchor link within a < p >.
If you ask me, i wonder why you chose to use paragraph in the first place and not make it common practice (in your templates and documentation) to use < br >'s instead? Using paragraph in emails has been an issue forever and will be as long the old clients still exist. It's why proven templates like Mailchimp still use < br >'s instead of < p >'s.
Using 2x< br > resolves the issue and gives you more control in various situations. Just my 2 cents.

[tobyimaginepublishing]

I'm experiencing the same issue too in Outlook 2007+!

Without link:

With link:

Please fix this!

[notasausage]

I know this bug is closed, but I wanted to point out that this is an issue in Outlook 2007-2013. I've seen it happen for a while now but never realized what was going on until now. Earlier and later versions of Outlook don't seem to suffer from this problem, and I think it's similar to table elements inheriting the margin of their children.

I don't have a definitive fix for this other than using the break tag instead of paragraph margins or to avoid giving the a tag a zeroed margin, as @nwerr mentions above.

[ysolomont]

The issue seems to be that the _typography.scss resets the margin for the anchor tag to 0. When there is an anchor nested in a paragraph, the a has a property of margin-bottom: 0;. That property supersedes the paragraph's 10px margin bottom.

One way to solve it is to add the following CSS:

p>a { margin-bottom:10px; Margin-bottom:10px; }

Edit: This solution does not work. However nwerr's solution above does work for me.

[benwakeford]

Just to chime in that I've just spent the morning wrestling with the same issue. I'm surprised more people haven't reported this, as links in paragraphs are one of the most basic things you'd expect an html email to deliver, and Outlook is still pretty popular with certain audiences.

I too ended up using nwerr's solution (thanks nwerr), and it doesn't appear so far to have broken anything else in the design.

Of course I would really rather not edit the source files. There seems to be no way to unset/initial a property in Outlook, so I'd suggest more thought be given to removing the Margin:0 in _typography.scss for the <a> tag, only adding it in for specific components when needed.

Margins do work with paragraphs in all Outlooks in the way that Foundation creates them (which is great), but it is specifically Foundation's initial setting of the <a> margin that causes them to be removed on paragraphs that contain anchors. So I would still class this as a bug with Foundation, especially as it can't be over-ridden by one's own code.

[coryski]

I have had success fixing this issue by inserting the following into my own custom CSS:

a { Margin: inherit; margin: inherit; }

Would be happy to hear if this solution works for anyone else or if any potential issues could come about by using it.

[benwakeford]

Coryski wins! That seems to work perfectly. I knew the initial keyword wouldn't work (which would be the preferable solution), but didn't even think to try inherit, as that would suggest it's inheriting the margin from the paragraph. That's Outlook, I guess.

So far I don't see any issues with other clients.

I've used:

p a { Margin: inherit; margin: inherit; }

to localise its impact a little more.

I do think this is something that should be considered for the F4E framework itself though (probably using newrr's solution), as it shouldn't be necessary to introduce a reset like this for each project.

Thanks @nwerr and @coryski!

[ableandre]

Was running into the same problem last night and this morning — @coryski's solution solved my problem perfectly.

I too think this issue needs to be looked at a bit closer for new F4E builds.

[chaoaretasty]

Thank you @coryski I've just been dealing with this problem myself. While I agree with @benwakeford and @ableandre that a closer look is needed into the margin vs padding issue I think there's a strong argument to add the inherit solution as a patch or minor point update due to the scope of the problem.

[ddowdall]

Thank you @coryski !

The solution from @coryski resolved the margin problem. (Verified by Litmus testing)

a { Margin: inherit; margin: inherit; }

[jkd77]

Why is this closed and labeled as client specific? Even it is client specific (which based on Email on Acid it actually seemed to effect a wide variety of clients), there is still a fix to be made. I spent a day and a half trying to figure this out when the solution should have been baked into Foundation. Personally, I'm using the following modifications within _typography.scss:

`body,
table.body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
td,
th
{
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;
}

// if we reset a bottom margin to 0, it removes bottom margin from its parent
a
{
color: $global-font-color;
font-family: $body-font-family;
font-weight: $global-font-weight;
padding: 0;
text-align: left;
line-height: $global-line-height;
}`