可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a rich HTML email. I was wondering how, in Outlook 2010 and 2007, you get the table in the layout to sit flush with the edge of the browser?

Have a look at this pic:

The pink is the background color of the body tag and the grey is the bg of the table. They both have 0 everything (margin, paddting ect). But there is still some space. The pink should not be visible.

Does anyone know how to get rid of this space on the body?

Also here’s some CSS for the start of the email:

<html>
<head>

    <style type="text/css">
        html, body{ width:100%; }
        body{ background-color:#ff00ff; }
    </style>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Test</title>
</head>
  <body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
            <table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >

Cheers!

回答1:

Outlook 2007/2010 adds 15px top/bottom and 10px left/right body padding to all html emails. You can't get rid of it.

~~Here's a trick to fake full backgrounds: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048~~

回答2:

Outlook uses the broken Microsoft Word HTML engine and is not based on any reasonable resemblance to a browser.

If you have Word, you can at least open your email as html and see how it renders it without having to go through the whole mail cycle.

Outlook really in the bane of any email marketer. It is an absolute pile of crap and fails to support even the most basic CSS expectations.

I'd have to have many frank and disappointing discussions with graphic designers over the limitations of email as a platform due to Outlook. Microsoft has seriously made a step backwards in using the Word engine for Outlook.

回答3:

Stange that the <body style="padding:0px; margin:0px;"> doesn't work.

I find that with outlook 2007/2010 that if you have padding-top applied to a column but not the other columns in the same row Outlook will apply that padding to all the columns for some reason. Are you able to paste more of the email code so we can have a look that its not something else causing the issue.

回答4:

Try using margintop="0" marginleft="0" marginright="0" on the <body> tag (updated to full example):

<html>
<head>
  <title>Title Tag</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">

</td></tr></table>
</td></tr></table>
</body>
</html>

You will need to set the width of 600 to whatever the width of your email is.

There are cross-email client bugs with body tags, and padding/margin values in CSS.

NB - this is only necessary, and only works, on the body tag.

回答5:

With pure CSS (I'm not sure the makers of IE like reading that), you can use !important to force the margin and padding of the <table> and the <body> to be 0px:

html, body
{
  margin: 0px !important;
  padding: 0px !important;
}

table
{
  margin: 0px !important;
}

Maybe it'll work, but maybe not. I'm not sure how Outlook handles CSS...

回答6:

As outlook doesn't support margin -reference. My work around to this issue was as below. Hope it will help someone.

                <table cellpadding="0" cellspacing="0" border="0" style="width:100% !important;  margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <!-- SECTION:TOP -->
                    <tr style="margin:0; padding:0; border:0;">
                        <td>
                            <img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
                        </td>
                    </tr>
                    <tr style="margin:0; padding:0; border:0;">
                        <td>
                            <img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
                        </td>
                    </tr>

回答7:

I know this is a bit late, but I came across this post and thought you might be able to test this method as well.

http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/

"Fixing the forced body padding in Outlook 2007, 2010 and 2013

Testing a html email recently with a high percentage of recipients likely to be users of Microsoft Outlook I came across a bug where it’s not possible to overwrite the forced body padding in versions of outlook (which use MS Words rendering engine 2007, 2010, 2013).

This was breaking the design and causing unwanted whitespace on the left margin of the email. The offending versions of outlook support margin (including negative margin) but only support inline styles. So the fix/hack is to wrap the entire email in a wrapper table and apply negative margin to just the problematic email clients – using html ‘if statements’ as below."

<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>
<!--<![endif]-->

<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
 <tr>
   <td>
<![endif]-->
    <!-- YOUR CONTENT HERE -->
    </td>
  </tr>
</table>