如何解决HTML邮件在iCloud端显示的顶部底部空白问题？

问题场景 #

制作含表格的HTML邮件，从Gmail发送至iCloud邮箱后，邮件顶部和底部出现不必要的空白区域。已尝试给表格添加border-collapse: collapse、margin:0; padding:0样式，电脑端打开HTML文件时空白消失，但iPhone端打开邮件时空白仍存在。

修复方案 #

邮件客户端（尤其是iCloud和iPhone原生邮件）对HTML元素的默认样式兼容性要求极高，需要针对body、外层表格和图片做更彻底的样式重置：

1. 给<body>添加全局重置样式，覆盖客户端默认的边距和行高
2. 给外层表格添加强制无外边距的样式，确保居中且无额外间隙
3. 优化图片样式，彻底消除图片周围的潜在空白

修改后的完整代码 #

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin: 0; padding: 0; line-height: 100%; font-size: 0; background-color: #ffffff;">
  <table width="640" align="center" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto !important; padding: 0; width: 100%; max-width: 640px;">
    <tr>
      <td style="margin: 0; padding: 0; line-height: 0;">
        <img src="https://i.imgur.com/M2OgVKj.jpeg" style="display: block; width: 100%; border: 0; line-height: 0;" alt="邮件头部图片" />
      </td>
    </tr>
  </table>
</body>
</html>

关键样式说明 #

• body样式：margin:0; padding:0清除默认边距；line-height:100%; font-size:0消除行高和文字大小带来的隐性空白；background-color统一背景色避免客户端默认背景干扰。
• 外层表格：border-spacing:0补充border-collapse的兼容性；margin:0 auto !important强制覆盖客户端的默认外边距；width:100%; max-width:640px适配移动端和桌面端。
• 图片和单元格：单元格添加line-height:0，图片设置display:block; border:0; line-height:0，彻底消除图片下方的空白间隙（部分客户端会把图片当作inline元素处理，产生额外行高）。

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