html表gmail签名中不需要的填充

Question

我正在为自己构建一个html签名。 我想实现一个带有背景和图像的重叠td元素。 我无法使它工作，所以我决定使用带背景的图像来实现它。

我得到了什么：

GMAIL

（image小于容器并具有部分背景）

td和img标签之间存在不需要的填充（3px）。

BROWSER

代码：

<table width="363" height="130" border="0" cellpadding="0" cellspacing="0" rules="none" >
<tr>
    <!-- This row is needed to enforce col widths in Outlook -->
    <td width="40">
    </td>
    <td width="3">
    </td>
    <td width="10">
    </td>
    <td width="100">
    </td>
    <td width="10">
    </td>
</tr>
<tr>
    <td width="40" valign="middle" height="130" colspan="1" bgcolor="#417dc0" nowrap style="width: 40px; vertical-align: middle; height: 130px; column-span: 1; background-color: #417dc0; white-space: nowrap;">
        <div style="margin-bottom: 5px;text-align: center;">
            <a href="https://www.facebook.com/fernando.n.candiani" target="_blank"><img src="http://fernandocandiani.com.br/email/facebook.png" width="20" height="20"></a>
        </div>
        <div style="margin-bottom: 5px;text-align: center;">
            <a href="https://www.linkedin.com/in/fernandocandiani" target="_blank"><img src="http://fernandocandiani.com.br/email/linkedin.png" width="20" height="20"></a>
        </div>
        <div style="text-align: center;">
            <a href="https://plus.google.com/110769302461961049884" target="_blank"><img src="http://fernandocandiani.com.br/email/googleplus.png" width="20" height="20"></a>
        </div>
    </td>
    <td width="3" valign="middle" colspan="1" height="130" bgcolor="#417dc0" nowrap style="width: 3px; vertical-align: middle; height: 130px; column-span: 1; background-color: #417dc0; white-space: nowrap;">
        <div style="border-right:2px solid #ffffff;height:100px"></div>
    </td>
    <td width="10" valign="middle" colspan="1" height="130" bgcolor="#417dc0" nowrap style="width: 10px; vertical-align: middle; height: 130px; column-span: 1; background-color: #417dc0; white-space: nowrap;">
    </td>
    <td width="100" valign="middle" height="130" colspan="1" bgcolor="#ffffff" nowrap style="width: 85px; vertical-align: middle; height: 130px; column-span: 1; background-color: #ffffff; white-space: nowrap;">
        <img width="100" height="130" src="http://fernandocandiani.com.br/email/fernandocandiani@133.png">
    </td>
    <td width="10" valign="middle" colspan="1" height="130" bgcolor="#ffffff" nowrap style="width: 10px; vertical-align: middle; height: 130px; column-span: 1; background-color: #ffffff; white-space: nowrap;">
    </td>
</tr>

尝试了许多方法，但无法使其发挥作用。

PS：在浏览器中直接渲染时，它在Chrome，Firefox和Opera中运行良好，但粘贴到gmail签名时会添加3px填充/边距

编辑： 我不知道是否值得一提，但该表的高度为133px，图像的代码为130px。该表也应该有130px的代码。如果我将图像增加到133px，则表格会变为136px，依此类推。

Answer 1

display：block或display：inline-block;

这是一个我不知道的已知错误！ 3px的差距 - ＆gt; HTML 5 strange img always adds 3px margin at bottom