Question

我有一个奇怪的问题，我正在为HTML电子邮件制作一个模块，左边有4个小图像，右边有1个大图像。

这一切看起来都不错，但在一些电子邮件客户端，如Yahoo，Outlook.com，Gmail和outlook 2000-2003，我在小图片之间得到了大约3px的空白。将margin和padding设置为0没有帮助，我根本看不到空格来自何处。

这是我目前为该模块提供的HTML：

the minimum limit

这是我模板中的CSS：

<table border="0" cellpadding="0" cellspacing="0" class="resize320" width="600">
<tr valign="top">
    <td width="25%">
        <img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/fa2c635f-b36e-4280-87dd-4005ac367f77.png" style="width: 100%; max-width: 150px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0 0 0 0;" width="150"><img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/fa2c635f-b36e-4280-87dd-4005ac367f77.png" style="width: 100%; max-width: 150px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0 0 0 0;" width="150">
    </td>
    <td width="25%">
        <img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/fa2c635f-b36e-4280-87dd-4005ac367f77.png" style="width: 100%; max-width: 150px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0 0 0 0;" width="150"><img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/fa2c635f-b36e-4280-87dd-4005ac367f77.png" style="width: 100%; max-width: 150px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0 0 0 0;" width="150">
    </td>
    <td width="50%">
        <img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/3c2b121f-b627-44e6-84c3-39465bd4e72c.png" style="width: 100%; max-width: 300px;" width="300">
    </td>
</tr>
</table>

Answer 1

您似乎需要更多CSS规则来重置<table>的行为。尝试将其添加到<style>：

/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 0 auto !important;
}
table table table {
    table-layout: auto;
}

用于电子邮件的HTML图像模块

1 个答案: