3

I want to apply margin top and bottom to <hr> tag in the email body, but it is not getting reflated to outlook email. Below is the code I want to apply:

<hr style='margin-bottom:-15px;margin-top:-15cm;color:#333;'/>

Please help me to get some workaround to this.

Ravi
  • 195
  • 3
  • 15
  • Have a look at this Litmus article https://litmus.com/help/email-clients/outlookcom-margins/ – Lars Beck Apr 13 '17 at 11:41
  • Many of the CSS properties doesn't work in Microsoft Outlook simply because its rendering engine doesn't support them. A good source to look at is: https://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx – HelmBurger Apr 13 '17 at 11:42

2 Answers2

4

HTML emails are incredibly annoying. You can not rely on a huge number of the features of modern-day CSS if you want your email to render properly in the majority of email clients.

Here is a tiny subset of things to avoid:

  • position
  • float
  • margin
  • display

There are plenty more.

Basically, use nested tables for your layout. They're the only thing that will give you consistent rendering across email clients.

Dreamweaver is a very good tool for helping you to compose a nested table structure without having to manually write the HTML. I don't know whether there's a similar product available for free.

If you're targeting mobiles - and you should be - you can use media queries. Within those queries you may be able to get away with some more recent CSS features but err on the side of caution.

Michael
  • 41,989
  • 11
  • 82
  • 128
0

According to this article, Outlook no longer supports margins. As an alternative you could wrap your hr element in a wrapper that is as high as your desired margin-top + margin-bottom, then offset your hr element by margin-top from the top.

In the example below I used 10px as margin-top and 20px as margin-bottom because I wouldn't know what 15px + 15cm equals =)

.hr-wrapper {
  position: relative;
  /* the height should be your margin-top + margin-bottom, e.g. 10px + 20px */
  height: 30px; 
}

hr {
  position: absolute;
  /* that's where your margin-top goes. The rest of the wrapper's height
  will contribute to margin-bottom */
  top: 10px;
  margin: 0; /* this is just for the browser where margin works */
  width: 100%;
}

/* These divs are just for show */
div:not(.hr-wrapper){
  background-color: goldenrod;
  height: 30px;
}
<div></div>

<div class="hr-wrapper">
    <hr>
</div>

<div></div>
Double M
  • 1,449
  • 1
  • 12
  • 29
  • 3
    According https://www.campaignmonitor.com/css/ neither `position` works in Outlook 2007/10/13. Is this really solution? – myf Apr 13 '17 at 13:26
  • @myf I didn't know that :( Apparently this would still not work in Outlook, then. – Double M Apr 13 '17 at 13:32