2013 年额外填充展望答案

【问题标题】：Extra padding outlook 20132013 年额外填充展望
【发布时间】：2016-08-30 00:57:13
【问题描述】：

除了 Outlook 2013 + 2016 之外，我的电子邮件在所有地方看起来都很棒。我的最终表格行的顶部似乎有额外的填充。

这是我的代码。图片的高度为 10 像素，看起来桌子顶部有额外的 10 像素的内边距。

这是您可以在上方看到的粉红色（ish）行。

这是我的代码。有什么想法吗？

 <table width="600" align="center" cellspacing="0" cellpadding="0" style="padding: 0 !important;margin: 0 !important; background-color: #ed5d98;" bgcolor="#ed5d98">
      <tr>
        <td>
          <table width="600" cellspacing="0" border="0" cellpadding="0" align="center style="width: 600px !important; mso-line-height-rule:exactly">
            <tr>
              <td width="600" valign="bottom" style="width: 600px !important;background-color: #fff mso-line-height-rule:exactly;" bgcolor="#fff">
                <img width="600" src="https://eoa-editor.s3.amazonaws.com/f90c5762a5514d4fa25ece7946c98bfd37feee58%2Fframe.png" alt"" />
              </td>
            </tr>
          </table>
      </td>
    </tr>
  </table>

【问题讨论】：

保存您的电子邮件并在 IE 中打开它。您拥有的代码不一定是由 Outlook 呈现的代码。 Outlook 将推断您拥有的内容，并围绕它认为需要的内容添加默认样式和元素。

标签： html css email outlook html-email

【解决方案1】：

这应该可行：

<table width="600" align="center" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%" style="font-size: 0; mso-line-height-rule: exactly; line-height: 0;" bgcolor="#ed5d98">
            <table width="100%" cellspacing="0" border="0" cellpadding="0" align="center">
                <tr>
                    <td width="100%" valign="bottom" style="font-size: 0; mso-line-height-rule: exactly; line-height: 0;" bgcolor="#ffffff">
                        <img width="600" src="https://eoa-editor.s3.amazonaws.com/f90c5762a5514d4fa25ece7946c98bfd37feee58%2Fframe.png" alt"" style="display: block;">
                    </td>
               </tr>
            </table>
        </td>
    </tr>
</table>

将font-size: 0; mso-line-height-rule: exactly; line-height: 0; 添加到<td>s 以强制执行精确的行高
将display: block; 添加到<img> 以取消额外的行高
从<table>s 和<td>s 中删除了一些重复的属性

【讨论】：

【解决方案2】：

您可以尝试几种方法。首先将border="0" 添加到图像中，您还可以将图像包装在一个div 中，并将内联css 高度设置为图像。此外，您可以将图像左对齐或右对齐（取决于布局），还可以将内联 margin:0px 添加到图像。

【讨论】：

【解决方案3】：

您有 mso-line-height-rule: 完全符合您的风格，但没有指定行高或字体大小，因此 Outlook 将假定为 15px。尝试添加 font-size: 0;行高：1px；符合您的 TD 风格。这通常对 Outlook 2013 有用。

【讨论】：