html电子邮件：填充，gmail中的文本对齐，在13

Question

13之前的任何东西都像这样（此屏幕截图特别是Android 8）：

文字被向上移动。我不确定它是忽略填充，线高还是其他的。它很小，最终不是一笔交易，但这让我很困惑。 eact文本行是一个较大表中的一张表（我将省略它，因为它包含电子邮件中的其他所有内容）。我将提供其中一张桌子的片段：

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

我试图添加

margin-top: 20px; line-height: 18px;来修复它，但没有改变任何东西。这些部分在其他电子邮件客户端正确显示，只是Gmail给了我问题。

Android的Gmail（版本13之前）在渲染HTML电子邮件时会有一些错误，这是修复它们的方法。

固定填充问题

Gmail的较旧版本倾向于忽略通过

padding

应用。最好的解决方法是使用基于

表的布局

而不是

style

Answer 1

<div>

或

cellpadding

填充。 使用

td

示例修复

<table>

<table role="presentation" width="100%" cellpadding="10" cellspacing="0" border="0">
  <tr>
    <td align="left" style="padding: 15px; background-color: #f4f4f4;">
      This is a test email.
    </td>
  </tr>
</table>

✅使用

cellpadding="10"

确保填充在Gmail中起作用。

固定文本对齐问题

wolder gmail版本可能会在

text-align

中

<div>

ignore。解决方案？使用基于

表的对齐

.

---

使用

<table>

示例修复

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center" style="text-align: center; font-size: 16px;">
      <p style="margin: 0;">Centered Text in Gmail</p>
    </td>
  </tr>
</table>

align="center"

✅确保在较旧的Gmail版本中正确对齐。

force gmail尊重风格

!important 可能会被剥离，因此请使用：

<p style="padding: 20px !important; text-align: center !important;">
  Forced padding and alignment
</p>