HTML邮件中替代padding、margin及透明边框的CSS兼容方案求助

Hey there! I totally get how frustrating HTML email styling can be—especially when Outlook and Hotmail throw out perfectly valid CSS like it’s nothing. Let’s walk through some reliable workarounds for adding that 10px left spacing to your label inside a <td>, since padding, margin, and transparent borders aren’t cutting it.

方案1：嵌套表格（最可靠的通用方案） #

Outlook lives and breathes table layouts, so leaning into that is usually the safest bet. You can add a tiny empty <td> before your label to create consistent spacing:

<tr>
  <td cellpadding="0" cellspacing="0" border="0">
    <!-- 嵌套表格控制间距 -->
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <!-- 空td作为10px左侧间距 -->
        <td width="10" style="width:10px; font-size:0; line-height:0;">&nbsp;</td>
        <td><label>你的标签内容</label></td>
      </tr>
    </table>
  </td>
</tr>

关键细节： #

• 设置width="10"属性（Outlook常忽略仅用CSS定义的空元素宽度）
• font-size:0; line-height:0; 避免空td产生多余垂直间距
•   防止Outlook直接折叠空td

方案2：内联样式配合Outlook专有属性 #

如果不想增加额外表格标记，可以用<span>包裹label，结合标准padding和Outlook专属 fallback：

<td>
  <span style="padding-left:10px; mso-padding-alt:0 0 0 10px;">
    <label>你的标签内容</label>
  </span>
</td>

为什么这有效： #

• padding-left:10px; 适配大多数现代邮件客户端（Gmail、Apple Mail等）
• mso-padding-alt:0 0 0 10px; 是微软Office专属属性，强制Outlook识别左侧内边距（值顺序为上/右/下/左）

方案3：文本缩进（适合块级标签） #

如果你的标签可以设为块级元素，text-indent也是一个能兼容Outlook的技巧：

<td>
  <label style="display:block; text-indent:10px;">你的标签内容</label>
</td>

注意： #

• 仅当标签设为display:block时生效（内联元素无法在各客户端一致识别text-indent）
• 如果标签内容会换行，这个方法只影响第一行，需谨慎使用

通用提醒 #

• HTML邮件务必使用内联样式——内部或外部样式表常被Outlook等客户端剥离或忽略
• 一定要在真实邮件客户端测试（别只依赖浏览器），虽然工具能辅助，但实际查看Outlook/Hotmail收件箱才最准确
• 关键样式避免使用CSS简写（比如padding:0 0 0 10px;），部分客户端会误解简写规则

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