HTML邮件中Gmail会剥离负向text-indent内联样式？求原因及解决方案

规则成因 #

Gmail的内置CSS安全过滤器，会主动删除所有带负向取值的text-indent属性。设计这条规则的初衷是避免负缩进将段落首行推出小屏设备的可视边界，造成内容裁切、阅读体验受损。
你观察到的“正向text-indent可正常生效”，本质是Gmail的样式白名单仅保留非负、取值范围不会引发内容溢出的text-indent配置，所有负向取值无论偏移量多小，都会被直接从内联样式中剥离，这也是为什么你最终看到剩下的样式只有margin-left:10px。

跨邮箱兼容的悬挂缩进实现 #

以下方案均可同时在Outlook网页/桌面端、Gmail全端生效，不会触发样式过滤：

• inline-block 负边距模拟法
  完全避开会被拦截的text-indent属性，用可兼容的内联块元素负边距实现首行偏移：

  <p style="margin-left:10px; margin-top:0; margin-bottom:8px;">
    <span style="display:inline-block; margin-left:-10px;">首行起始内容</span>
    段落所有后续内容、自动折行的非首行内容，都会保持10px的左偏移，视觉效果和原设计的悬挂缩进完全一致
  </p>
  

  注意负边距值必须使用px单位，不要用em、rem这类相对单位，否则同样有被过滤的概率。
• 表格占位法
  利用邮件客户端对表格布局的零拦截特性实现固定偏移，是当前兼容性最稳定的方案：

  <table style="border-collapse:collapse; width:100%; margin:0; padding:0;">
    <tr>
      <td style="width:10px; height:1px; padding:0; margin:0; font-size:1px;">&nbsp;</td>
      <td style="padding:0; margin:0; text-align:left;">
        段落所有折行内容都会对齐这个单元格的左边界，只要调整第一个占位列的宽度，就能自定义悬挂缩进的偏移量
      </td>
    </tr>
  </table>
  

• padding嵌套模拟法
  给段落设置统一的左内边距，再通过块级元素的负边距将首行拉出内边距范围：

  <p style="margin:0 0 8px 0; padding-left:10px;">
    <div style="margin-left:-10px; display:block;">首行内容（与段落最左边界齐平）</div>
    后续所有换行的内容都会保持10px的左缩进，还原原设计的悬挂效果
  </p>
  

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