邮件模板中图片底部与容器底部对齐的实现（禁用特定CSS）

由于邮件客户端对现代CSS布局（flex/grid）及定位属性的支持极差，且块级元素的vertical-align属性无效，你之前的div方案无法生效。唯一可靠的兼容方案是利用表格布局——这是邮件模板的标准兼容做法：

核心解决方案 #

将承载图片的容器替换为表格单元格（<td>），并给单元格设置vertical-align: bottom，同时确保图片消除默认间隙：

<body>
  <table>
    <tr>
      <!-- 设置单元格垂直对齐为底部，可指定固定高度 -->
      <td style="vertical-align: bottom; height: 200px; border: 1px solid #ddd;">
        <!-- 图片设置display:block消除底部默认空白 -->
        <img src="1.jpg" style="display: block;" alt="示例图片" />
      </td>
    </tr>
  </table>
</body>

关键细节说明 #

• 表格的兼容性：所有主流邮件客户端（包括Outlook、Gmail、苹果邮件等）都完全支持表格布局，这是邮件模板的通用基础。
• vertical-align的正确应用：vertical-align仅对行内元素和表格单元格生效，因此必须将属性加在<td>上，而非div。
• 消除图片间隙：图片默认是行内元素，部分客户端会在图片底部添加少量空白，设置display: block可以彻底消除这个问题。
• 固定高度场景：如果需要盒子保持固定高度，直接给<td>设置height即可，图片会自动贴合单元格底部。

多元素共存的扩展场景 #

如果盒子内除了图片还有其他内容（比如文字），只需将所有内容放在同一个<td>内，单元格的vertical-align: bottom会让所有内容都贴到底部：

<td style="vertical-align: bottom; height: 200px; border: 1px solid #ddd;">
  <img src="1.jpg" style="display: block;" alt="示例图片" />
  <p style="margin: 8px 0 0; font-size: 14px;">底部说明文字</p>
</td>

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