移动端Outlook、Gmail App中HTML邮件四周白边如何消除？

问题根因 #

当前代码在Outlook、Gmail移动端出现左右白边，是三类邮件客户端兼容规则未适配导致的：

• 仅清除了body的外边距，未覆盖客户端自动给HTML、邮件根容器添加的默认边距
• 内容块固定写死600px宽度，窄屏视口下被客户端自动压缩并生成留白
• 嵌套层级的内边距没有区分上下、左右方向，在移动端被识别为可见留白

具体修复步骤 #

• 补全局边距清除规则
  在原有style块的最前面补充强制样式，覆盖移动端客户端的默认边距：

  html, body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  

• 清理重复的样式定义
  现有代码里两次重复定义了#body的样式，后写的颜色规则会覆盖前一次的配置，可合并为单一样式块，减少代码冗余：

  #body {
      color:#dd9f33;
      font-size: 18px;
      line-height: 30px;
  }
  

• 给固定宽度的内容块加移动端适配类
  给两个写死width="600"的内容table添加类名class="content-block"，在媒体查询里补充全宽规则，避免固定宽度在窄屏下被压缩留边：

  @media screen and (max-width: 760px) {
    .content-block {
      width: 100% !important;
      border-radius: 0 !important;
    }
    img {
      width: 100% !important;
      height: auto !important;
      display: block;
    }
  }
  

• 修正嵌套层的内边距设置
  删除外层嵌套table上全方向的padding:23px，将该内边距迁移到对应的td上，仅保留上下方向的留白，去掉左右方向的padding，避免在窄屏上形成可见白边：
  修改前的结构：

  <table style="padding: 23px" cellpadding="0" cellspacing="0" width="100%">
  

  修改后的结构：

  <table cellpadding="0" cellspacing="0" width="100%">
      <tr>
          <td style="padding: 23px 0;" align="center" valign="top">
  

• 补外层背景色的全宽兜底
  确保最外层的100%宽度table的背景色和邮件设计的底色完全一致，避免客户端加的默认边距露出白色背景：

  <table role="presentation" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ededed" style="margin:0; padding:0;">
  

参考实现逻辑 #

麦当劳这类无白边商业邮件的通用做法，是将邮件背景色铺满最外层全宽容器，移动端下所有内容块强制撑满视口宽度，不做非必要的左右内边距，从根源上避免客户端默认生成的留白显示出来。

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