Bottom spacing between tables

Question

I'm building an email and have run into a problem where there seems to be automatic spacing at the bottom between two tables.

<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>

I've included tags such as: cellpadding cellspacing border and gave them a value on zero, which I though would have solved the problem, however that wasn't the case.

Answer 1

Add style="display: block;" to the image. (See Why does my image have space underneath? for a deeper explanation)

A quick glance at your code shows me you're going to have a lot more problems with email clients. I would strongly suggest testing before sending using a service like 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>