HTML5 －img video flash等 在table 的td中有空隙问题

问题如图，本例中，在td中加入了flsh后，在HTML5中，FLASH和下面的表格之间有了间隙，为 了方便看出来，将TD的背景设成了绿色。

在网上找到原因和方案，特此记录。

a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。

解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-size:0;
解决办法二是给两者vertical-align:top，让其top对齐，而不是baseline对齐
解决办法三是给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题
其他解决办法也有，但这些都是从根本上解决问题

作者：张丰麟ZFL
链接： https://www.zhihu.com/question/26821863/answer/65552730
来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。  

下面上代码

<style type="text/css">
img {
border:0;/*以下三个设置可去除蓝色边框*/
margin:0;
padding:0;
display:block;/*去图片中的间隙*/
} 
/*<!--*{margin:0;padding:0;padding-bottom:0} -->*/
</style>.....

<table bgcolor="#00FF00" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
	<tr>
    	<td><img src=bbb.jpg"></td>
    </tr>
    <tr>
    	<td >
              <embed  src="aaa.swf" width="778" height="202" style="vertical-align:top" ></embed><!--flash,style中为设置-->
        </td>
      </tr>
  </table> 

<table>..........

红色部分为加入的代码，经测试,改成下面的也可以

style="display:block"

这些代码仅供测试。

经测试都可以。<video>也可以。

总结

style="vertical-align:top"

style="display:block"

style="line-height:0"或style="font-size:0"