移动端HTML邮件：无需padding/margin实现<tr>内<td>上方留白

Hey there! Dealing with spacing in HTML emails can be a real headache, especially since padding/margin behave unpredictably across different email clients. Let's break down a couple of rock-solid solutions for your stacked cells on mobile:

1. 最兼容方案：嵌套表格 + 空占位行（适配所有客户端，包括老版Outlook） #

Directly adding margin/padding to <td> elements can fail in desktop Outlook, so we'll wrap each content cell in its own nested table, then use media queries to stack them and add reliable spacing.

<!-- Outer container table -->
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse;">
  <tr>
    <!-- First content cell -->
    <td class="stack-cell" valign="top" style="padding: 0;">
      <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse;">
        <tr>
          <td style="padding: 0;">你的第一个单元格内容</td>
        </tr>
      </table>
    </td>
    <!-- Second content cell -->
    <td class="stack-cell" valign="top" style="padding: 0;">
      <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse;">
        <tr>
          <td style="padding: 0;">你的第二个单元格内容</td>
        </tr>
      </table>
    </td>
    <!-- Third content cell -->
    <td class="stack-cell" valign="top" style="padding: 0;">
      <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse;">
        <tr>
          <td style="padding: 0;">你的第三个单元格内容</td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- Mobile spacing row (hidden by default) -->
  <tr class="mobile-spacing" style="display: none; height: 20px;">
    <td colspan="3" style="font-size: 0; line-height: 0;">&nbsp;</td>
  </tr>
</table>

<!-- Media query for mobile devices -->
<style type="text/css">
  @media only screen and (max-width: 600px) {
    .stack-cell {
      display: block !important;
      width: 100% !important;
      margin-bottom: 20px !important;
      /* Fallback for clients that might ignore margin: use the mobile-spacing row */
    }
    .mobile-spacing {
      display: table-row !important;
    }
    /* Remove spacing from the last cell to avoid extra space at the bottom */
    .stack-cell:last-child {
      margin-bottom: 0 !important;
    }
  }
</style>

为什么这个方案靠谱： #

• 嵌套表格确保内容和间距逻辑完全隔离，不会互相干扰
• 隐藏的空行可以作为兜底方案，应对那些不支持块级<td> margin的客户端
• 老版桌面Outlook不识别媒体查询，所以桌面端会保持原有的并排布局，完全符合需求

2. 简化方案：内边距 + 媒体查询（适合现代邮箱客户端） #

如果你的受众主要使用现代邮箱（比如Gmail、Apple Mail、Outlook 365），可以跳过嵌套表格，直接用内边距实现：

<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse;">
  <tr>
    <td class="stack-cell" valign="top" style="padding: 0; padding-bottom: 0;">你的第一个单元格内容</td>
    <td class="stack-cell" valign="top" style="padding: 0; padding-bottom: 0;">你的第二个单元格内容</td>
    <td class="stack-cell" valign="top" style="padding: 0; padding-bottom: 0;">你的第三个单元格内容</td>
  </tr>
</table>

<style type="text/css">
  @media only screen and (max-width: 600px) {
    .stack-cell {
      display: block !important;
      width: 100% !important;
      padding-bottom: 20px !important;
    }
    .stack-cell:last-child {
      padding-bottom: 0 !important;
    }
  }
</style>

注意事项： #

• 内边距在现代客户端兼容性很好，但不要给<div>用margin（老版桌面Outlook会忽略块级元素的margin）
• 一定要加上border-collapse: collapse;，避免表格出现多余的默认间距

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