我有一个奇怪的问题,我正在为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>
答案 0 :(得分:0)
您似乎需要更多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;
}