表格之间的底部间距

Question

我正在构建一封电子邮件，但遇到了一个问题，即两个表格之间的底部似乎有自动间距。

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <table width="800px" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr>
      <td>
        <img alt="" src="https://imgur.com/6zCGwNt.png" />
      </td>
    </tr>
  </table>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <table width="800px" cellpadding="50" cellspacing="0" border="0" align="center" bgcolor="#10141f">
    <tr>
      <td>
        <h2 style="font-weight:300" align="center">
          <font face="verdana" color="#fff" size="5">This is where the video will be added.</font>
        </h2>
      </td>
    </tr>
    <tr>
      <td>
        <video width="700px" height="359" controls poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4">
                    <!-- fallback 1 -->
                    <a href="https://www.emailonacid.com" ><img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
                    </video>
      </td>
    </tr>
  </table>
</table>

我已经包含了诸如：cellpaddingcellspacingborder 之类的标签，并将它们的值设为零，我认为这可以解决问题，但事实并非如此。

Answer 1

将style="display: block;" 添加到图像中。 （更深入的解释见Why does my image have space underneath?）

快速浏览一下您的代码就会发现，您在使用电子邮件客户端时会遇到更多问题。我强烈建议在发送之前使用 Litmus 之类的服务进行测试。

• http://litmus.com

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <table width="800px" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr>
      <td>
        <img alt="" src="https://imgur.com/6zCGwNt.png" style="display: block;" />
      </td>
    </tr>
  </table>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <table width="800px" cellpadding="50" cellspacing="0" border="0" align="center" bgcolor="#10141f">
    <tr>
      <td>
        <h2 style="font-weight:300" align="center">
          <font face="verdana" color="#fff" size="5">This is where the video will be added.</font>
        </h2>
      </td>
    </tr>
    <tr>
      <td>
        <video width="700px" height="359" controls poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4">
                    <!-- fallback 1 -->
                    <a href="https://www.emailonacid.com" ><img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
                    </video>
      </td>
    </tr>
  </table>
</table>