HTML 邮件模板的正确写法#
在 Web 项目中，HTML 邮件模板不能按网页的方式来写。
即使在部分客户端（如 QQ Mail）表现正常，也很容易在 Gmail、Outlook 中出现样式错位。
为了保证邮件在主流客户端中的一致性，实际可行的做法只有一套。
核心结论#
HTML 邮件模板必须使用：
table作为布局结构- 全部样式写成 inline style
- 明确指定尺寸（width /padding/font-size）
这是目前兼容 Gmail、Outlook、Apple Mail、QQ Mail 的唯一稳定方案。
推荐写法（实践规则）#
1. 使用 table 进行布局#
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 24px;">
内容区域
</td>
</tr>
</table>
避免使用 div + flex / grid 进行排版。
2. 所有样式使用 inline style#
<p style="margin:0;font-size:14px;line-height:20px;color:#354052;">
正文内容
</p>
不要依赖：
<style>标签- class / selector
- 外部 CSS
3. 图片尺寸必须显式指定#
<img src="logo.png" width="68" style="display:block;width:68px;height:auto;" />
避免图片在部分客户端被自动放大或撑开布局。
4. 按 “最差客户端” 设计#
即使某些客户端支持现代 CSS，也应以 Gmail / Outlook 的渲染能力作为最低标准。
结语#
HTML 邮件并不是网页渲染环境。
使用 table + inline style 并不是过时，而是目前唯一可靠的工程实践。
当邮件需要稳定触达用户时，兼容性优先于代码 “优雅性”。