none
Body margin of 0 in Outlook 2007/2010/2013?

    Question

  • I hope this is the most appropriate place for this question.

    According to http://msdn.microsoft.com/en-us/library/office/aa338201(v=office.12).aspx, Outlook 2007 is meant to support body margin fully.

    ("body" › "Cascading Style Sheet Style Support Level" = "FULL".
    "FULL" = "All of CORE and COREEXTENDED".
    "COREEXTENDED" › "margin" + individual margin properties.)

    However, this doesn't seem to be accurate, as you can't easily get rid of the body margin.

    So, is there a secret way (mso- prefixed CSS properties, @page rule, etc.) to set the body margin of an HTML email to 0, in emails sent to (not necessarily from) the more recent Outlook versions that use Word for rendering?

    I'd especially appreciate if someone who works on the Outlook/Word rendering team can share any insights on how to accomplish this.

    Tuesday, November 13, 2012 11:14 AM

Answers

  • Thanks Dan, my bad for forgetting to update this thread like I said I would.

    I did indeed hear back from support, who kindly checked the source code to confirm that the spacing (15px top/bottom, 10px left/right) is unfortunately forced.

    They key point that I had missed, is that Outlook renders HTML emails in the view that’s called Web Layout in Word. Even in Word, you can see the forced margins when using this layout view.

    When I argued that you can set the body margins to 0 in Word and should therefore be able to in Outlook too, I was looking at the Print Layout view which is not comparable to what’s used in Outlook.

    This is very disappointing news of course, and Microsoft support did record a feature request for this to change in future versions (it should arguably be a bug report instead). I’d encourage anyone struggling with this issue to contact support via https://support.microsoft.com/get-support/office/outlook-2013/email-communication/sending-receiving-viewing-email/ and report the bug as well, providing an example of the code you're using and a screenshot of the expected and actual rendering.

    Edit: I should also mention that

    1. Microsoft did make sure to update the documentation, so that should at least prevent some misinformation, and
    2. The escalation team made it pretty clear that there are definitely no workarounds that could solve the issue either.
    Thursday, September 12, 2013 7:26 AM

All replies

  • Probably no such way. If there's such way, you shall be able to see it from MS's pages or documents.
    Friday, November 16, 2012 6:16 AM
  • Hey Wilson, thanks for your reply!

    The issue here is that the article at http://msdn.microsoft.com/en-us/library/office/aa338201(v=office.12).aspx claims that Outlook does support the body margin property fully, even though this is clearly not the case.

    The Outlook/Word rendering engine also has lots of undocumented CSS properties and other ways to enable various hidden behavior, which is why I'm hopeful that someone may be able to share such a workaround.


    Friday, November 16, 2012 6:43 AM
  • Hi Stig,

    Thank you for posting in the MSDN Forum.

    I'll involve some experts who are more familiar with your issue. This may take some time.

    Thank you for your patient and understanding.

    Best regards,


    Quist Zhang [MSFT]
    MSDN Community Support | Feedback to us

    Tuesday, November 20, 2012 6:28 AM
    Moderator
  • Thank you Quist,

    That's great news, and I look forward to hearing what they come back with.

    Tuesday, November 20, 2012 6:56 AM
  • Hi Stig,

    I would like to reproduce the issue in my test lab in order to check the exact behavior. Could you please share a sample of the CSS and the HTML that you are using to reproduce the issue? Also it would be a great help if you could share a snapshot explaining of the result that you actually see versus the expected results so that things are more comprehensible.

    Thanks,

    Shailesh G. Rajput
    ______________________________________________

    Microsoft Developer Support - Messaging & Collaboration

    Monday, November 26, 2012 9:39 PM
  • Hey Shailesh,

    Sure thing, I'm more than happy to provide a sample.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>Body margin of 0 test</title>
    	</head>
    	<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" bgcolor="#556270" style="margin- margin-right: 0; margin-bottom: 0; margin- padding- padding-right: 0; padding-bottom: 0; padding-">
    		<div style="background-color: #ff6666; color: #ffffff; font-family: sans-serif;">
    			There should be no margin around this box.
    		</div>
    	</body>
    </html>

    Expected (Internet Explorer rendering):

    Wrong (Word rendering):

    As you can see, I've defined the body margin with both HTML and CSS, and the body padding with CSS. I also used individual CSS properties for each side of the body element, since Outlook isn't always good with shorthand CSS.

    If you can figure out any change I can make to the code above, to make this render correctly in Outlook 2007/2010/2013, that would be perfect. Thanks for looking into this!

    Monday, November 26, 2012 11:24 PM
  • Hi Stig,

    Thanks for the code.

    I was able to reproduce this issue using the code that you had provided. I also got the similar results that you have mentioned.

    Next I created a HTML file using this code and opened it with the Word. The issue was reproducible even with Word which confirms that this is something to do with the way Word is rendering these tags.

    I will check with the Word support team to get their input on this issue.

    We'll will keep you posted with our findings.

    Thanks for your time and patience.

    Regards,

    Shailesh G. Rajput
    ______________________________________________
    Microsoft Developer Support - Messaging & Collaboration

    Tuesday, November 27, 2012 11:45 PM
  • Thank you Shailesh, that would be very helpful!
    Thursday, November 29, 2012 6:09 AM
  • Hi Stig,

    From what I can tell, the padding works as expected.  If you turn on the ruler, you should see that the text is at the "0" margin. 

    I think we need the buffer for the ruler gutter space used with line markings (left edge for Left-To-Right based languages and the right-edge for Right-To-Left languages).  You could probably set a negative indent and get it to visually display the way you are looking for, but that would probably have other side effects when viewed elsewhere.    

    Brandon

    Tuesday, December 04, 2012 9:55 PM
  • Hi Brandon, thanks for your reply on this, I really appreciate your time here.

    I think I get what you're saying, but I don't actually see how the ruler is relevant here. The 0 point on the ruler isn't relative to the document, but rather, it just defines 0 as wherever the body margin ends. To me, this doesn't translate to the padding/margin working as expected, but I may well be missing something?

    In Word, I can save a document with body margins of 0, but if I save that as an HTML file, this doesn't render that way when viewed in a browser, nor when sent to Outlook.

    Regarding negative indents, have you tested this suggestion properly? Indents in Word are just saved to the HTML file as paragraph margin, if I'm not mistaken? I've tried every variation of negative margins, negative padding, etc. that I could think of, and none of these attempted workarounds have been successful.

    Tuesday, December 04, 2012 10:15 PM
  • Hi Sting,

    I also have this problem for a long time looking for a solution.

    There isn't a way to get rid of this margin using CSS. You can potentially if you have a good grasp of VML: http://www.w3.org/TR/1998/NOTE-VML-19980513

    But I did not give up. If you find a solution, let me know.

    Friday, December 07, 2012 3:26 PM
  • Thanks Igor,

    I'm fairly well-versed with VML, and haven't been able to find a workaround that way either, unfortunately.

    If everyone else reading this who has had this same problem, also registers and posts a comment, or votes the question up, that can also help. This issue has been well known to email designers since Outlook 2007 was first released, but may have gone unnoticed by Microsoft since we haven't been doing a good enough job pointing it out.

    I'm confident that someone here can bring this post to the attention of a (current or former) Microsoft employee, who both has a deep understanding of how the Word rendering engine has been implemented in Outlook, and who also cares about emails looking beautiful in their email client.

    Of course, if I do come across a solution elsewhere, I'll be sure to post back here immediately.
    Friday, December 07, 2012 3:43 PM
  • Hey Shailesh,

    It's been a couple months and so I just wanted to check with you if there's any kind of timeframe for when the Word support team will be able to look into this matter? Thank you.

    Tuesday, January 29, 2013 1:31 PM
  • Hi Stig,

    Brandon De is from the Word support team who was looking into this issue. As Brandon had menioned in the thread, this behavior seems to be  by design. You should try to adjust the gutter space for the ruler in order to change the margin.

    In case you have further queries, I would recommend you to open a new support case. It will ensure that the issue would be handled more quickly and effectively with direct assistance from a Microsoft Support Engineer through Microsoft Customer Support Services. You can contact Microsoft Product Support directly to discuss additional support options you may have available, by contacting us at 1-(800)936-5800 or by choosing one of the options listed at
    http://support.microsoft.com/common/international.aspx?rdpath=fh;en-us;cntactms

    If you are a MSDN [TechNet] subscriber, you can also contact our support by using your free support incidents: http://msdn2.microsoft.com/en-us/subscriptions/aa948874.aspx

    Regards,

    Shailesh G. Rajput
    ______________________________________________
    Microsoft Developer Support - Messaging & Collaboration

    Friday, February 01, 2013 12:38 AM
  • Thanks Shailesh,

    My apologies - I didn't realize Brandon was from the Word support team since his proposed solution appeared to be untested.

    We have a Microsoft Partner ID, so I'll see if that route yields better results, and then post back with an update for everyone here.

    Tuesday, February 05, 2013 3:20 PM
  • Hey Stig,

    Sorry about the delay.  I did send a request to have the information updated to document the correct CSS support level for the body attribute. 

    If you need any further information, I would suggest that you continue down the path of opening a support case for more information if you haven't already.

    Brandon

    Thursday, March 14, 2013 7:48 PM
  • This has been one of the most polite threads I have ever read!
    I had high hopes that it may have gotten traction, but was disappointed not to find a solution or work-around here. At least the documentation no longer lists FULL support level for the body tag.

    I don't suppose you ever heard back from contacting support directly?


    Wednesday, September 11, 2013 10:01 PM
  • ...
    this behavior seems to be by design. You should try to adjust the gutter space for the ruler in order to change the margin.
    ...

    I don't suppose there is a way to hint to the word2007/outlook html renderer that you want no gutter space at all?

    Regards,

    Dan

    Wednesday, September 11, 2013 10:05 PM
  • Thanks Dan, my bad for forgetting to update this thread like I said I would.

    I did indeed hear back from support, who kindly checked the source code to confirm that the spacing (15px top/bottom, 10px left/right) is unfortunately forced.

    They key point that I had missed, is that Outlook renders HTML emails in the view that’s called Web Layout in Word. Even in Word, you can see the forced margins when using this layout view.

    When I argued that you can set the body margins to 0 in Word and should therefore be able to in Outlook too, I was looking at the Print Layout view which is not comparable to what’s used in Outlook.

    This is very disappointing news of course, and Microsoft support did record a feature request for this to change in future versions (it should arguably be a bug report instead). I’d encourage anyone struggling with this issue to contact support via https://support.microsoft.com/get-support/office/outlook-2013/email-communication/sending-receiving-viewing-email/ and report the bug as well, providing an example of the code you're using and a screenshot of the expected and actual rendering.

    Edit: I should also mention that

    1. Microsoft did make sure to update the documentation, so that should at least prevent some misinformation, and
    2. The escalation team made it pretty clear that there are definitely no workarounds that could solve the issue either.
    Thursday, September 12, 2013 7:26 AM
  • I've just been tackling this problem myself and have created a fix by wrapping the email in a table wrapper and applying negative margin for just these email clients.

    Written up in a blog post here: http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/


    Monday, December 09, 2013 11:30 AM
  • Nice one Andy, thanks for sharing that!

    I'm confused about why I didn't get that working in my previous testing, but that's further than I (or anyone at Microsoft) have gotten.

    Testing it now, it works well in that the left side of the table touches the edge of the page. However, the 100% width of the table is still based on the padded body width, so what I'm seeing is a table with 0 margin on the left and 20px on the right (even when style="margin-left: -10px; margin-right: -10px" is applied). >100% widths didn't help either.

    The best example of what I'm after is the ability to have a full width background color for part of the email that's different from the body background color. So while this doesn't fully solve that problem, it gives me some new optimism that it might be achievable.

    Also, it's certainly possible that this will be the solution to related problems others may be having, so thanks again for posting it here.

    Tuesday, December 10, 2013 1:28 PM