使用Foundation for Email创建带磁贴的邮件模板：间距问题求解

嘿，我懂你现在的困扰——用Foundation for Email做响应式邮件模板时，并排磁贴的间距没法靠原生框架直接实现，只能用border临时凑视觉效果对吧？别担心，我给你一套更规范、适配所有主流邮件客户端的解决方案，完美匹配你想要的效果！

为什么原生Foundation搞不定？ #

先掰扯清楚根源：邮件布局的核心是表格，而像Outlook这类“顽固”的邮件客户端，对CSS的margin支持极差。Foundation for Email的网格系统默认是紧密排列的，没预留间距。你的border临时方案虽然能看，但本质是用边框模拟空白，不是真正的间距——一旦磁贴或页面背景色变化，这个“假间距”就会露馅。

规范解决方案：嵌套表格+内边距 #

邮件开发里最稳妥的间距实现方式，就是嵌套表格+td的padding。原理很简单：给每个磁贴套一层外层表格，外层表格的单元格设置padding（这部分就是我们要的真实间距），内层表格放磁贴内容并设置自己的背景色。这样padding区域会继承页面背景色，完美模拟出磁贴之间的空白间距。

给你一个对应目标表格的改造示例：

<!-- 外层容器表格，用Foundation网格列控制排版 -->
<tr>
  <!-- 第一个磁贴列 -->
  <td class="columns small-12 large-6">
    <!-- 外层间距表格 -->
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <!-- 这里的padding就是磁贴的左右间距，需要上下间距也可以加 -->
        <td style="padding: 0 10px;">
          <!-- 内层磁贴内容表格 -->
          <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #ffffff;">
            <tr>
              <td style="padding: 20px;">
                <!-- 磁贴内容，比如标题、文本、图片 -->
                <h3>磁贴标题1</h3>
                <p>磁贴内容描述...</p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>

  <!-- 第二个磁贴列 -->
  <td class="columns small-12 large-6">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="padding: 0 10px;">
          <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #ffffff;">
            <tr>
              <td style="padding: 20px;">
                <h3>磁贴标题2</h3>
                <p>磁贴内容描述...</p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

关键细节说明 #

• 兼容性拉满：所有样式直接写在td的style属性里（inline样式），避免邮件客户端忽略外部CSS；padding是所有邮件客户端普遍支持的属性，比margin靠谱太多。
• 灵活控间距：你可以根据需求调整外层td的padding值，比如要上下间距就改成padding: 10px;，实现全方向的空白间隔。
• 适配响应式：结合Foundation的.columns类，大屏幕下磁贴并排，小屏幕自动堆叠，间距也会跟着适配，不会出现布局错乱。

这个方案完全替代你的border临时方法，实现的是真正的空白间距，和你想要的效果图完全一致，而且是邮件开发中的标准做法哦！

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