【发布时间】：2014-05-14 05:44:30
【问题描述】：
我正在使用 Mailchimp 和我自己的 HTML 构建一个 HTML 电子邮件活动。我听说要构建成功的 HTML 电子邮件，您必须专注于使用表格，并使用内联 CSS。我已经从我的样式中删除了所有填充，并在边距、填充、边框和轮廓标签中添加了 0 度量。有什么建议吗？真的坚持这一点。
<body style="background:blue; margin:0; padding:0; border:0; outline:0;">
<div id="wrap" style="background:green; width:100%;">
<table width="100%">
<tr>
<td style="
width:100%; margin:0; padding:0; border:0; outline:0;
height:100px;
background:#4b86fc;
background-size:60px 60px;
">
</td>
</tr>
</table>
<table width="500" align="center">
<tr>
<td style="
padding:20px 0px 25px 0px;
color:#000; font-family:Verdana, Geneva, sans-serif;
font-weight:100; font-size:12px;">
<p>Hi,</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Many Thanks,
Liam</p></td>
</tr>
</table>
<table width="100%">
<tr>
<td style="
width:100%; margin:0; padding:0; border:0; outline:0;
background-color:#ebebeb;
background:#ebebeb;
border-top:1px solid #c3c3c3;
font-family:Verdana, Geneva, sans-serif;
font-weight:100; font-size:11px;
text-align:center;">
<ul style="list-style-type:none; margin:0; padding:0;">
<li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none; color:#545454;">Homepage</a></li>
<li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none; color:#545454;">Twitter</a></li>
<li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none; color:#545454;">Dribbble</a></li>
<li style="display:inline; padding:0 0 0 8px;"><a href="" style="text-decoration: none; color:#545454;">Facebook</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
【问题讨论】：
-
我喜欢这句话：“我听说要构建成功的 HTML 电子邮件，您需要‘像 1997 年一样进行设计’”。现在这个想法是从哪里来的？ :)
-
@summea：可能是微软，当时他们决定在 Outlook 中使用 Word 的渲染引擎。如果你认为 IE 对 html 不好，Word 几乎让 adobe pagemill 看起来不错。
-
我在几篇文章、博客和教程中读到过类似的摘录，例如“我们不是很久以前就放弃了基于非语义表的设计吗？是的，现在你可以再次体验到快乐。不幸的是，大多数电子邮件客户端不支持像您习惯的普通的旧 CSS 布局。相反，它回到了 90 年代并熟悉了单元格间距。'
-
你看过html email boilerplate 优秀的模板... HTML 电子邮件！我知道这不是问题的直接答案，但我还不能发布 cmets，抱歉。
-
你也可以添加边距：0 !important;头内。你能描述一下你面临的问题吗？您寻求帮助但没有告诉我们问题所在。