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 並不是過時，而是目前唯一可靠的工程實踐。
當郵件需要穩定觸達用戶時，兼容性優先於代碼 “優雅性”。