BD
1
Removing Paragraph Bottom Margin in Outlook.com
I don't normally use p tags in HTML emails but I have two tables aligned left and right that collapse for mobiles. In order to remove the 3px vertical gap that Outlook 2007 and 2010 add I've had to wrap some of my content in a <p> tag.
I realise that support for margins was dropped in Outlook.com but I've followed these instructions to try to remove the unwanted margin anyway. Unsurprisingly it's not working. Does anyone know if it's possible to remove the bottom margin?
This is the CSS from the Email on Acid instructions that I can't get to work:
<style type="text/css">
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
p {
margin:0;
padding:0;
margin-bottom:0;
}
</style>
<p style="margin-top:0;margin-bottom:0;"></p>
Try this...
<p style="Margin-top:0;Margin-bottom:0;"></p>For some unknown reason Outlook.com strips margins unless you use a capital M
A capital M, or really any version of
marginwith any letter capitalized. SomargiN,mArGiNorMARGINwould work as well. (But for the best readability, I agreeMarginis the way to go.)Rather than trying to solve for the <p> tag, do you have a use case that requires using <p> tags? Support for <p> varies across ESP/ISPs which can cause your text to render inconsistently. Instead try removing your <p> tags, including the text directly in your <td> and controlling the spacing and styling in the <td> tag. Most ESPs render text directly in the <td> with 0 padding and margin, so you don't need to include it on every tag. Hope that helps!
Find and replace 'margin-' with 'Margin-' and make sure you are doing this after inlining css as CSS inliners tend to removing capitalization from these.
This is brilliant, works, thanks so much. (:
Peter: I've been working on my email this afternoon and I've come to the conclusion that the
<p>tag isn't required. I took it out and addedstyle="mso-table-lspace:0; mso-table-rspace:0;"directly to my<td>and that seems to have worked. I'm not sure why the Email on Acid solution uses the<p>but I'll avoid it from now on.Mark: that's really helpful to know, thank you! I could see that my margin overrides were missing but I had no idea why.
Thanks, both.