Email template padding not aligned - html

Question

I'm trying to send email newsletters, and the padding are all wrong on outlook. here is my code:
<div style="height: 600px; overflow:hidden;">
<table style="width: 520px;" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td width="500">
<table style="width: 250px;" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; line-height: 1.5; color: #cccccc; margin: 0px;"><i>bla bla | adadadsd</i></p>
</td>
</tr>
<tr>
<td><img createnew="true" src="https://multimedia.getresponse.com/getresponse-zMTNQ/photos/563de7a4-ca7d-462a-88be-1cd31ef21fc4.jpg" style="padding-bottom:10px;" width="250" height="250"></td>
</tr>
<tr>
<td>
<h3 style="font-family: Helvetica Neue, Arial; font-size: 18px; line-height: 1.5; color: #194845; margin: 0px; mso-line-height-rule:exactly;">adad is the way to go!</h3>
</td>
</tr>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; color: #c69a5b; margin: 0px;">................</p>
</td>
</tr>
<tr>
<td height="27"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/linetitle.png" width="53" height="6"></td>
</tr>
<tr>
<td valign="top" height="139">
<p style="font-family: Helvetica Neue, Arial; font-size: 14px; line-height: 1.5; color: #222222; margin: 0px;">ajksdhajkh ajhdkajhd hdkahdkahdkah hdkahdkahdkja adajhdakjdkahd asdadhkad ahdkahdkadhkadha Obradovic. Uadd has been certified adad APP, and is ready to implement best practice on all 3244 projects.
</p>
</td>
</tr>
<tr>
<td>
<img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:6%;" width="250" height="60">
</td>
</tr>
</tbody>
</table>
<table style="width: 250px;" cellpadding="0" border="0" align="right">
<tbody>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; line-height: 1.5; color: #cccccc; margin: 0px; text-decoration:none; margin:0;"><i>adad | asda.org</i></p>
</td>
</tr>
<tr>
<td><img createnew="true" src="https://multimedia.getresponse.com/getresponse-zMTNQ/photos/a6042f20-f80a-4826-830b-eb482d49280c.jpg" width="250" height="250"></td>
</tr>
<tr>
<td>
<h3 style="font-family: Helvetica Neue, Arial; font-size: 18px; line-height: 1.5; color: #194845; margin: 0px;mso-line-height-rule:exactly;">adadd in Eastern Europe</h3>
</td>
</tr>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; color: #c69a5b; margin: 0px;">adad leads in asdasdad the asdad adada!</p>
</td>
</tr>
<tr>
<td height="27"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/linetitle.png" width="53" height="6"></td>
</tr>
<tr>
<td valign="top" height="139">
<p style="font-family: Helvetica Neue, Arial; font-size: 14px; line-height: 1.5; color: #222222; margin: 0px;">jahdajkd adwrkjq akjdadka ajdajhd akjdkhr wrwr wrwrakn kajdalkjd jakljdaljd akljdjeor kadjlqldm lajkdjojd akljd jdks ks akdj of 2019!</p>
</td>
</tr>
<tr>
<td>
<img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:4%;" width="250" height="60">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
The button on the right ends up higher than the one on the left. How would you make them aligned on outlook?
I've tried replacing margin's with padding's but still no lock. I used % instead of px too.
It looks fine when i view it on a browser too.

Answer 1

Email development is NOT html development. Your web browser supoorts a different set of features than an email client like IOS, Gmail, Outlook and others, even if you view your emails through that web browser.
Outlook has spotty support for padding.
https://www.campaignmonitor.com/css/box-model/padding/
padding-top does not work at all with Outlook 2013-2019. Move the padding off the images and into the parent td.
<tr>
<td style="padding: 10px 0 0 0;">
<a href="https://adad.co/2019/03/29/well-is-the-way-to-go/" target="_blank">
<img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:6%;" width="250" height="60"></a>
</td>
</tr>
In addition, Outlook has spotty support for % values. I used a padding of 10px instead.
Last, Outlook 2007-2019 is never going to support Helvetica Neue, since it's a webfont and it has spotty support for webfonts with a space in the name. Arial is not a good fallback. Consider something like Trebuchet MS instead.
Good luck.