Buttons don't have bottom margin in Outlook 2013

[davidhouweling]

How can we reproduce this bug? Use a <button> followed by anything... in Outlook 2013 there is no margin below the button. This has been tested using the inliner, and emailing it (using nodemailer) to an email address consumed via Outlook 2013.

<button href="#" class="primary">
    Example button
</button>
<p>Example text</p>

With the default margin specified in _settings.scss.

$global-margin: 16px;
$button-margin: 0 0 $global-margin 0;

What did you expect to happen? Space to exist below <button> and before the <p>.

What happened instead?

What email clients does this happen in? Only really testing it in Outlook 2013.

Suggested solution Instead of using margin for tables (which is what the <button> ultimately is), put in a <spacer /> instead. However, this means that you most likely can't used scss variable to control it...

[tdhartwick]

Nice catch, wondering if maybe we omitted the capital Margin rule for buttons. We might be able to control the margin with what you've suggested with the <spacer /> tag through Inky as well. We'll look into this. We're always happy to check out a PR if you discover a fix!

[rafibomb]

The capital 'M' is for Outlook.com only. I'm not sure how spacer can play well in a button unless we strip the CSS out of it. If we do that, then there is no easy way to globally set the bottom margin, right?

@tdhartwick I am seeing the bottom margin set correctly here:

table.button {
  width: auto;
  Margin: 0 0 16px 0; 
  margin: 0 0 16px 0; 
}

Using the spacer underneath the button is your best bet.

[davidhouweling]

@tdhartwick yep, I've disabled bottom margin in my project and forced all developers to manually do the spacing. I think this might be the only way to go for consistency.

[rafibomb]

There is a method I've seen work. Adding another <td> into the table and give it a class. I set this up on a branch for testing and so far it's perfect.

Branch and commit: https://github.com/zurb/inky/commit/b9079853c6e00eb266ab4f9110b11ca027d30b8d

Test: https://litmus.com/checklist/emails/public/5780424

CSS

// creates spacing below buttons
td.button-spacer {
  height: $button-margin-bottom; 
  font-size: $button-margin-bottom;
  line-height: $button-margin-bottom;
}

What are your thoughts of doing it this way? Are you able to see how it works for you?

[rafibomb]

@davidhouweling How did this work for you? I'd like to make this PR official and get a few more eyes on it before. Thanks!

[davidhouweling]

I haven't tried it but litmus looks good. From memory though, I thought that there was an occasion where when the td was empty, Outlook didn't render anything. So would it be better adding an   inside the td?

[catherineomega]

This looks good to me. I'm seconding @davidhouweling's suggestion to stick an   in there though.

[tobyimaginepublishing]

@rafibomb I tried your method and it didn't work for me. I tried it with and without a  .