HTML新闻通讯中独立加载文章的间距调整问题

嘿，我明白你现在的困扰——用RSS加载的文章并排显示，但怎么调padding、cellspacing都出不来间距，对吧？咱们来看看问题出在哪，以及怎么解决：

首先，你当前的代码里，padding加在了内部的.thumbnail div上，再加上表格设置了border-collapse: collapse，还有inline-block元素自带的空白特性，导致间距没生效。下面给你几个靠谱的解决方案：

方案1：给外层表格加margin（最稳妥的邮件兼容方案） #

直接给每个承载文章的table设置margin，这是邮件客户端兼容性最好的方式：

<table style="width:300px; display:inline-block; float:left; border-collapse: collapse; margin: 0 20px 20px 0;">

margin: 0 20px 20px 0意思是：右间距20px，下间距20px，这样横向和纵向换行后的文章都有清晰的空隙了。

方案2：改用Flex布局（更简洁的现代方式） #

如果你的目标邮件客户端支持Flex（现在大部分主流邮箱比如Gmail、Outlook 365都支持），可以把外层的.all改成Flex容器，用gap属性一键控制间距：

<div class="all" style="display:flex; flex-wrap:wrap; gap:20px;">
  <table style="width:300px; border-collapse: collapse;">
    <!-- 内部内容保持不变 -->
  </table>
</div>

gap:20px会自动给所有子table添加横向和纵向的间距，不用再逐个调margin，代码清爽很多。

方案3：调整表格单元格的padding（保留原有结构的修改） #

如果你不想改外层布局，可以去掉table的border-collapse: collapse，然后给td加padding：

<table style="width:300px; display:inline-block; float:left;">
  <tr>
    <td style="padding:20px;">
      <div class="thumbnail"> <!-- 这里可以去掉原来的padding样式了 -->
        <!-- 内部内容不变 -->
      </div>
    </td>
  </tr>
</table>

因为border-collapse: collapse会让表格边框和单元格padding合并，去掉它之后，td的padding就能正常生效，从而给整个文章块带来间距。

最后提醒下：邮件通讯的CSS兼容性很重要，尽量用内联样式（你已经做得很好了），如果要兼容非常旧的客户端，方案1的margin方法是最保险的。

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