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>

我添加了诸如cellpadding cellspacing border之类的标签，并为其赋予了零值，尽管我可以解决问题，但事实并非如此

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>

桌子之间的底部间距

1 个答案: