Remove line-height from Button's generated code

[imryanjay]

How can we reproduce this bug? Inspect the generated code for the Button component and you'll see that line-height is applied. View an email on Litmus and you'll see that when line-height is applied to the elm the button appears taller than expected.

Write out the HTML (or Inky code) that causes the issue.

<button href="#">Button Title</button>

What did you expect to happen? Expectations are that the padding settings applied to the Button should create a button with those exact padding.

What happened instead? Line-height attribute disrupts those settings.

What email clients does this happen in? Via Litmus, all Outlook clients.

I've done some testing to figure out why my buttons in Outlook looked taller, and when line-height is applied to the and anchor tag, outlook applies that to the button. This disrupts the padding you set in the settings.scss file. No other browsers are effected by the line-height - but also not effected when removed.

[imryanjay]

A current workaround is to add this snippet after importing foundation-emails

.button {
    & td,
    & a {
        line-height: initial;
    }
}

[viking1304]

Which Outlooks are we talking about here? There are a few Outlooks now:

1. MSO Outlook - those where <!--[if mso]> works - those are Outlooks on Windows where users have not switched to the New Outlook

2. non MSO Outlook - those where <!--[if mso]> does not work - those are Outlooks on Windows where users switched to the New Outlook, Outlooks on Mac and Outlook on Android

3. outlook.com

EDIT: I understand what you are talking about now. But my original question remains the same: which Outlook and what are your settings?

The button is not an actual button. It is a link in a table cell. The line height comes from a link, which is 1.3 by default.

a {
  line-height: $global-line-height;
}

$global-line-height: 1.3;

Inliner adds CSS to all elements, including mentioned line height.

Even with line-height: initial the button is taller than the font size + paddings since even the initial height is larger than the font size (otherwise, letters like g and y would be cut off).

Some fonts require specific line-height settings, so it is always best to set $global-line-height yourself based on the fonts you use. The same applies to your button paddings.