HTML邮件模板部分CSS代码未生效，寻求解决方案

一、按钮padding与text-decoration失效修复 #

邮件客户端（如Outlook、Gmail部分版本）对<a>标签的内联padding支持极差，且默认链接下划线样式可能无法通过text-decoration: none直接覆盖。改用嵌套表格实现按钮是最可靠的方案：

修改后按钮代码 #

<tr>
  <td align="center"> <!-- 确保按钮在单元格内居中 -->
    <table cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td style="background-color: #8c30ff; padding: 0.5em;">
          <a href="https://google.com" style="color: white; text-decoration: none; display: block; width: 100%;">
            Join now
          </a>
        </td>
      </tr>
    </table>
  </td>
</tr>

关键说明 #

• 用表格单元格<td>承载background-color和padding，邮件客户端对单元格的内边距支持远优于<a>标签
• 给<a>标签设置display: block和width: 100%，让它填满整个单元格，确保点击区域完整，同时彻底继承单元格的内边距
• text-decoration: none需保留，部分客户端会强制给链接添加下划线，需显式覆盖

二、表格左右margin不生效修复 #

margin-left: auto; margin-right: auto在多数邮件客户端中不被支持，改用**外层100%宽度表格+内层表格align="center"**实现居中：

修改后容器表格代码 #

<!-- 外层表格撑满容器 -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <!-- 用td的padding代替原来的margin-top/margin-bottom -->
    <td style="padding: 80px 20px;">
      <!-- 内层表格实现居中+最大宽度 -->
      <table align="center" width="620" style="max-width: 620px;" cellspacing="0" cellpadding="0" border="0">
        <!-- 邮件内容区域 -->
      </table>
    </td>
  </tr>
</table>

关键说明 #

• 外层表格设置width="100%"，确保在不同邮件客户端中撑满容器宽度
• 内层表格添加align="center"属性，这是邮件客户端通用的居中方式，比margin:auto可靠
• 同时设置width="620"（属性）和max-width:620px（内联样式）：不支持max-width的客户端会使用固定宽度，支持的客户端会自适应小屏幕
• 用外层<td>的padding代替原表格的margin-top/margin-bottom，避免margin在邮件客户端中失效

邮件模板CSS通用注意事项 #

• 优先使用表格布局，避免依赖块级元素的margin/padding
• 所有样式尽量写为内联样式，部分客户端会忽略<style>标签中的样式
• 对链接、按钮这类交互元素，尽量用表格承载样式，而非直接给<a>标签加复杂样式

内容的提问来源于stack exchange，提问作者Glenn