Android 13之前版本Gmail中HTML邮件的内边距与文本对齐问题

问题分析 #

Gmail Android 13之前的版本（如Android 8）在渲染包含图片和文本的表格行时，存在垂直对齐渲染bug：会忽略单元格的padding-top或无法正确继承line-height，导致文本向上偏移。另外要注意，邮件客户端几乎不支持表格单元格的margin属性，你添加的margin-top完全无效。

修复方案 #

针对Gmail旧版本的渲染特性调整代码：

• 给图片所在的<td>添加垂直对齐属性和样式，强制单元格内容垂直居中
• 移除无效的margin-top属性
• 给文本容器<font>也设置line-height，确保文本自身行高生效
• 优先用HTML原生属性（如valign）配合内联样式，兼容旧渲染引擎

修改后的代码片段 #

<td>
    <table
        role="presentation"
        class="main"
        width="100%"
        cellpadding="0"
        cellspacing="0"
        border="0"
    >
        <tbody>
            <tr>
                <td class="numerical-image" width="200px" align="left" valign="middle" style="vertical-align: middle;">
                    &nbsp;<img
                        style="width: 36px !important; vertical-align: middle;"
                        width="36"
                        src="./step-1.png"
                    />
                </td>
                <td
                    width="100%"
                    align="left"
                    valign="middle"
                    style="
                        text-align: left;
                        font-size: 16px;
                        padding-top: 20px;
                        padding-left: 16px;
                        padding-bottom: 20px;
                        line-height: 18px;
                        vertical-align: middle;
                    "
                >
                    <font face="arial, helvetica, sans-serif" color="#000" style="line-height: 18px;">
                        Text line one
                    </font>
                </td>
            </tr>
        </tbody>
    </table>
</td>

额外优化建议 #

如果仍存在偏移，可以尝试：

• 给整个表格行<tr>添加valign="middle"属性
• 把图片旁的 替换成固定宽度的空单元格，避免空格的渲染差异
• 调整line-height的值为20px（和上下padding一致），让文本的垂直空间更均匀

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