Removing margin on <p> in outlook.com

Hello all,

My understanding of outlook.com was that it didn't support any margins at all, Just incase I have

p {
    margin-top: 0; 
    margin-right: 0; 
    margin-bottom: 0 !important; 
    margin-left: 0;
}

However when I inspect whats arrived I see this

p {
       margin: 0 0 1.3em;
}

As Im sure you can imagine, this isn't very helpful! - Any suggestions/workarounds?

Thanks, Brendan

roshodgekiss roshodgekiss, 4 years ago

Hi there nismo, Outlook.com's wonky margin support has ben a great source of pain for many designers. We have a couple of tips in our blog post on Outlook.com's quirks, which you may find to be helpful. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
nismo1986, 4 years ago

Thanks roshodgekiss,

I had read that article but I didn't think it really gave a suitable alternative to using <p> just a method to simulate margin.

Needless to say, Incase anyone else is in the same boat I changed my P's to spans/tds and where I could, used <center> or <div> to break the spans to simulate block elements depending on how they were supposed to be aligned - Not sure this is going to be very client friendly when they use the editor though :/

I had avoided using headings because of the quirks they bring - does outlook.com apply a margin bottom to those as well?

roshodgekiss roshodgekiss, 4 years ago

Thanks, nismo - it's really useful to know your approach!

Yes, Outlook.com adds its own default margin and line-height values to headings. For example, for h3 these are:

margin: 0 0 5px 0;
line-height: 124%;

Best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
nismo1986, 4 years ago

wow so the margins are even dealt with in completely different units... great stuff outlook!

nismo1986, 4 years ago

Just a quick thought and not sure how real-world useful this is - But if you really had to use <p>'s you can set the font size to 0 (since 1.3 * 0 = 0) to get no automatically added margin on bottom, then if you put a span or something inside the p with the desired font-size you get the semantics of a P (with an additional span) but none of the forced margins from outlook.com

Like I said - it doesn't feel very real-world helpful but it does work.

p { font-size: 0; }
.body { font-size: 13px; }
<p><span class="body">Your text here</span></p>
roshodgekiss roshodgekiss, 4 years ago

Wild, nismo - thanks for sharing this approach. Why does Outlook have to complicate things, eh?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free