foundation-emails icon indicating copy to clipboard operation
foundation-emails copied to clipboard

Remove line-height from Button's generated code

Open imryanjay opened this issue 1 year ago • 2 comments

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 avatar Feb 11 '24 18:02 imryanjay