邮件正文必须用构建，因outlook desktop、gmail等主流客户端不支持、flex、@media及内联margin/padding，仅能跨平台可靠控制宽度、对齐与堆叠顺序。
邮件正文必须用 <table> 构建，不是为了“复古”，而是因为 Outlook Desktop（2016–2024）、Gmail Web/iOS/Android、Yahoo、Apple Mail 等主流客户端根本无法可靠解析 <code><div>、<code>display: flex、@media 或内联 margin/padding —— 唯一能跨平台控制宽度、对齐、堆叠顺序的 HTML 元素，只有 <table>。
<h3>为什么不能直接把网页 HTML 拿来当邮件正文</h3>
<p>Outlook Desktop 用的是冻结于 2007 年的 Word 渲染引擎，它不识别 <code><section></section>、<p></p>，甚至会自动给文本加 <p></p> 标签并吃掉你设的 padding；Gmail 则整块剥离 <style></style> 标签，连 style="margin: 20px" 都可能静默丢弃。你看到的“布局崩了”，不是 bug，是预期行为。
<div>、<code><section></section>、<header></header>在多数客户端中被忽略或强制闭合-
font-size: 1.2rem或line-height: 1.5em在 Outlook 里常失效，优先用像素值或无单位数值（如line-height: 1.4） - 图片不写
width和height属性，Outlook 会渲染成 0×0，再补style="width:200px;height:40px"才稳 - 外层：
<table width="100%">，负责背景色和居中上下文，必须带 <code>cellpadding="0" cellspacing="0" border="0" - 中层：
<table width="600">，固定宽度主容器，<code>width="600"是硬性属性，不能只靠style="width:600px"（Outlook 2013/2016 直接忽略） - 内层：每个逻辑模块（标题、按钮、图文卡片）单独一个
<table>，宽度设为 <code>600或300，禁用colspan/rowspan（Outlook 支持极不稳定）按钮、图片、文字怎么写才不崩
它们不是独立元素，而是必须“寄生”在已对齐的
<td> 里，靠属性而非 CSS 控制行为。 <ul><li>按钮不用 <code><button></button>，改用嵌套<table>：<code><table align="center"><tr><td bgcolor="#007bff" style="padding:12px 24px">点击确认</td></tr></table> - 图片必须同时写
width、height属性和对应style，再加style="display:block"消除下方空白 - 文字对齐统一用
<td align="center">，别信 <code>style="text-align:center"（Outlook 2010 中大概率失效）；小字号 footer 优先用<font size="2"></font>，比 CSSfont-size更稳响应式不是靠媒体查询，而是靠结构共存
@media在 Outlook Desktop 中完全无效，在 Gmail 中支持有限且不可靠。所谓“响应式”，其实是三套结构并存，由客户端能力自动择一渲染。- 桌面结构：并排两个
<td width="300">，放在同一 <code><tr> 内 <li>移动端结构：用 <code>class="stack-column"+@media only screen and (max-width: 600px)把<td> 强制设为 <code>display: block !important，前提是这些<td> 已包裹在同一 <code><tr> <li>Outlook 降级结构：用 <code>mso-hide: all和条件注释（如<!--[if mso]>...<![endif]-->）让 Outlook 只看到最简骨架
真正难的不是堆功能，是在删掉 70% 的现代 CSS 后，还能让信息清晰、操作可达、品牌可辨。每多一层嵌套、每多一个伪类、每多一个圆角，就多一个在某个客户端里静默崩掉的点。
- 桌面结构：并排两个
