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, 3 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, 3 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, 3 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, 3 years ago

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

nismo1986, 3 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, 3 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

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098