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

Question

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

我得到的：

GMAIL

(image比容器小，有部分背景)

td 和 img 标签之间有不需要的填充 (3px)。

浏览器

代码：

<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 padding/margin

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

Answer 1

显示：块或显示：内联块；

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

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

Unwanted padding in html table gmail signature

html-table

html-email