Fatal编程技术网
  • html/
  • Outlook 2007和2010中的丰富HTML电子邮件。。。如何删除上边距？

Outlook 2007和2010中的丰富HTML电子邮件。。。如何删除上边距？

html css email layout

Outlook 2007和2010中的丰富HTML电子邮件。。。如何删除上边距？,html,css,email,layout,outlook-2007,Html,Css,Email,Layout,Outlook 2007,我有一个丰富的HTML电子邮件。我想知道，在Outlook 2010和2007中，如何使布局中的表格与浏览器边缘齐平 请看这张图片： 粉红色是body标签的背景色，灰色是表格的背景色。它们都有0个所有内容（边距、填充等）。但仍有一些空间。粉红色不应该是可见的 有人知道如何去除身体上的空隙吗 此外，以下是电子邮件开头的一些CSS： <html> <head> <style type="text/css"> html, body{ wi

我有一个丰富的HTML电子邮件。我想知道，在Outlook 2010和2007中，如何使布局中的表格与浏览器边缘齐平

请看这张图片：

粉红色是body标签的背景色，灰色是表格的背景色。它们都有0个所有内容（边距、填充等）。但仍有一些空间。粉红色不应该是可见的

有人知道如何去除身体上的空隙吗

此外，以下是电子邮件开头的一些CSS：

<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;" >


html，正文{宽度：100%；}
正文{背景色：#ff00ff；}
试验
干杯

对于纯CSS（我不确定IE的制造商是否喜欢阅读），您可以使用
！重要信息
强制将
和
的边距和填充设置为
0px
：

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

table
{
  margin: 0px !important;
}
也许它会起作用，但也许不会。我不确定Outlook如何处理CSS…

认为
不起作用

我发现，在outlook 2007/2010中，如果对一列应用了
padding top
，但对同一行中的其他列不应用，出于某种原因，outlook将对所有列应用该padding。您是否能够粘贴更多的电子邮件代码，以便我们可以查看它是否不是导致问题的其他原因

尝试在
标记上使用
margintop=“0”marginleft=“0”marginright=“0”
（更新为完整示例）：


标题标签
您需要将宽度600设置为电子邮件的任何宽度

在CSS中，存在带有正文标记和填充/边距值的跨电子邮件客户端错误

注意-这只是必要的，并且只对body标签有效。

Outlook使用损坏的Microsoft WordHTML引擎，并且与浏览器没有任何合理的相似之处

如果你有Word，你至少可以以html的形式打开你的电子邮件，看看它是如何呈现的，而不必经历整个邮件周期

Outlook确实是任何电子邮件营销者的祸根。这绝对是一堆废话，甚至连最基本的CSS预期都无法支持

我不得不与平面设计师就电子邮件作为Outlook平台的局限性进行许多坦率而令人失望的讨论。微软在使用Word engine for Outlook方面已经严重倒退了一步。

Outlook 2007/2010在所有html电子邮件中添加了15px上/下和10px左/右正文填充。你无法摆脱它

这里有一个伪造完整背景的技巧：

因为outlook不支持边距-。我围绕这个问题的工作如下。希望它能帮助别人

                <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>

我知道这有点晚了，但我看到了这篇文章，认为您也可以测试这个方法

“修复Outlook 2007、2010和2013中的强制车身填充

最近使用高百分比的收件人测试html电子邮件 很可能是微软Outlook的用户，我遇到了一个错误 无法在的版本中覆盖强制的正文填充 outlook（使用MS Word渲染引擎2007、2010、2013）

这破坏了设计，并在屏幕上造成不必要的空白 电子邮件的左边距。outlook支持的有问题版本 边距（包括负边距），但只支持内联样式 修复/破解是将整个电子邮件包装在一个包装表中并应用 仅对有问题的电子邮件客户端使用负边距–使用html“如果” 声明如下。”

我已经更新了代码，包含了一整段代码，您可以将其用作主HTML的包装。 
                <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>

<!--[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>