Search code examples
htmlcssoutlookhtml-emailspacing

How can I make spacing for Outlook E-Mails?

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:

default Mail App on iMac

But on Outlook on Windows its like that:

enter image description here

Solution

  • 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>