How can I make spacing for Outlook E-Mails? - html

Question

I am working on an E-Mail-template and have some issues due to special needs coding for Outlook E-Mails.
In the following I will show an example of a picture with what I tried to make some spacing on top of it.
But several options didn't work out.
However I tried different options like:
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" style="Margin-top: -20px;">
<![endif]-->
Or
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" style="margin-top: -20px;">
<![endif]-->
Or
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" style="padding-top: -20px;">
<![endif]-->
Or
<style>
.rebtn {padding-top: -20px;}
</style>
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" class="rebtn">
<![endif]-->
Or
<style>
.rebtn {margin-top: -20px;}
</style>
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn" class="rebtn">
<![endif]-->
None of them worked.
I would be very grateful if you could help me with this issue.
Cheers, JD
-------------------EDIT-------------------
So here is some more detail for better understanding:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:20px">
<tr>
<td align="right">
<a href="#rg">
<!--[if !mso]><!-- -->
<img src="img/btn_rng-ans.png" class="img-btn">
<!--<![endif]-->
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn">
<![endif]-->
</a>
</td>
</tr>
...
</table>
And here the external CSS Code for the image:
.img-btn {width:200px; margin-top: -40px !important;}
It should look like that:
But on Outlook on Windows its like that:

Answer 1

Outlook listens to spacing on block-level elements like <p> and <td>.
You can use a paragraph to create spacing in the following way, noting padding will be ignored:
<p style="margin:20px 0 0 0; line-height:0; font-size:0;"> </p>
Note I'm zeroing the height of the text with line-height and font-size, so that that does not get in the way (would be added to the height of the margin otherwise).
You could also just use the table if you have it already in place:
<td style="padding:20px 0 0 0;">
Outlook doesn't regard margin in a td. You have to use padding. No need to put it in the table as well.
Negative margins are only used when you want to overlap items, and you need a hack for that. But it appears that's a completely different question. What you need to figure out is what is causing the space.
Space in summary can be caused by:
Padding on td, table
Margin on p
Line-height and font-size, even on 'empty' table cells (e.g. <td></td>)
And remember to zero the cellpadding and cellspacing on tables: <table cellspacing="0" cellpadding="0"> unless you are specifically using it
Outlook ignores spacing on:
divs (except for inline-level styles such as font-size)
spans (except for inline-level styles)
attempts at changing elements to block (through display:block), and any padding/margins on that (e.g. trying to do a button on an <a> element)

Answer 2

I just made the following to fix it:
<!--[if !mso]><!-- -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:20px">
<tr>
<td align="right">
<a href="#rg">
<img src="img/btn_rng-ans.png" class="img-btn">
</a>
</td>
</tr>
<!--<![endif]-->
<!--[if gte mso 9]>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:-20px">
<tr>
<td align="right">
<a href="#rg">
<img src="img/btn_rng-ans.png" width="180" class="img-btn">
</a>
</td>
</tr>
</table>
<![endif]-->
Instead of:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:20px">
<tr>
<td align="right">
<a href="#rg">
<!--[if !mso]><!-- -->
<img src="img/btn_rng-ans.png" class="img-btn">
<!--<![endif]-->
<!--[if gte mso 9]>
<img src="img/btn_rng-ans.png" width="180" class="img-btn">
<![endif]-->
</a>
</td>
</tr>