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

【问题标题】：Unwanted padding in html table gmail signaturehtml表gmail签名中不需要的填充
【发布时间】：2017-05-03 21:05:26
【问题描述】：

我正在为自己构建一个 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 填充/边距

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

【问题讨论】：

也许 img 有填充或边框.. 将边框设置为无，填充为 0 并查看
不走运！如果值得一提，我不知道，但表格的高度为 133 像素，图像的高度为 130 像素，如代码所示。该表也应该有 130px 的代码。如果我将图像增加到 133px，表格将变为 136px，依此类推。

标签： html-table html-email

【解决方案1】：

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

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

【讨论】：