Button looks awful in Outlook - html

Question

Hello I am making a button to work in outlook 2010 and the problem is that the button image wont centre vetically and the padding & margin wont display. Is there anyone who can help me solve this issue? Works fine on most email clients.
<table style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:center; padding:0; float:left; " align="center" >
<tbody >
<tr style="vertical-align:top; text-align:left; padding:0; " align="left" >
<td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; display:block; color:#fff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:16px; text-align:left; background-color:#EB7201; width:auto !important; " valign="top" align="center" >
<div class="mktEditable" id="cta-btn">
<a href="#pramrylink" style="color: #fff; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 14px;letter-spacing:1px;vertical-align: middle; display: inline-block; margin: 10px;padding: 10px;">
<span style="vertical-align:middle; margin-left:5px;">Primary Button</span>
<img src="http://eu-lon03.marketo.com/rs/brotheruk/images/arrow-orange.png" alt="facebook" border="0" width="30" height="20" style="vertical-align: middle;">
<br>
</a>
</div>
</td>
</tr>
</tbody>
</table>

Answer 1

Margin and padding should really be replaced with td's to keep the email format consistent across all clients. But for you code above removing the text-align: left; on the tr should fix it.
YOU SHOULD READ THIS ON ALLOWED USE OF CSS IN EMAILS https://www.campaignmonitor.com/css/
I've removed stuff and added it below for you to work from.
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" >
<tbody >
<tr style="vertical-align:top; text-align:left;" align="left" >
<td style="color:#fff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:16px; " valign="middle" align="center" >
<div class="mktEditable" id="cta-btn">
<a href="#pramrylink" style="width: 180px;
color: #fff;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
letter-spacing:1px;
vertical-align: middle;
display: inline-block;
padding: 10px;
background-color:#EB7201; ">
<span style="vertical-align:middle;" align="left">Primary Button</span>
<img src="http://eu-lon03.marketo.com/rs/brotheruk/images/arrow-orange.png" alt="facebook" border="0" width="30" height="20" style="vertical-align: middle;">
<br>
</a>
</div>
</td>
</tr>
</tbody>
</table>
Floats are replaced with align: left/right;
Margins should be replaced with more complex combinations of tr's and td's, if something need to be centred like an image then align:center; on the wrapping td should do that.

Answer 2

Try reset everything on the link (0 line-height, 0 padding, 0 font-size) and apply the styles (fix line-height, fix padding, and fix font-size) inside the link into a span where you apply the resetted styles.
I suggest to try a lot different css implementations and resend your mails.
Tip: Campaignmonitor offers a good list according to CSS and Newsletters
https://www.campaignmonitor.com/css/