我有一个问题，即在带有 HTML 电子邮件签名的移动设备上，表格或图像周围出现过多的填充，我找不到解决方案。
我必须尝试我研究过的每一个解决方案，包括:
- 为图片添加 display:block
- 添加 line-height: 1px 到 td
- 添加字体大小:0；到 td
- 确保每个部分都有填充:0；和 margin :0；
- 将 cellpadding="0"和 cellspacing="0"添加到所有表、tr 和 td 元素
- 将宽度和高度添加到表格和 td(没有任何效果)
- 添加 float :left 和 align="left"
- 添加表格布局:固定；
- 添加边框:0；边界间距:0；和边界崩溃；关于元素
这个问题似乎出现在我测试过的三星和 iPhone 设备上。
如有任何新建议，我们将不胜感激。
特别有额外间距的图片在这里:
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important;"></td>
</tr>
</table>
这里是整个代码，因为我有两个并排的表，这可能是问题的原因:
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #00001b;
text-decoration: underline;
}
table {
padding: 0;
margin: 0;
display: block;
}
</style>
</head>
<body>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
<tr style="padding: 0; margin: 0;">
<td cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0;" border="0" height="10">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;">
<tr>
<td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> <a href="tel:0000000">00000000</a> |
<strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a> <a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p>
</td>
</tr>
</table>
</body>
</html>
最佳答案
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="345" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
<table align="left" cellpadding="0" cellspacing="0" border="0" width="180">
<tr>
<td valign="bottom" cellpadding="0" cellspacing="0"><img src="logo.png" width="180" height="100" alt="" style="display: block"></td>
</tr>
</table>
</td>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="165">
<tr>
<td style="text-align: left;padding:0 0 0 25px;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> <a href="tel:0000000">00000000</a> |
<strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a> <a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p>
</td>
</tr>
</table>
您可能想要添加 </td><td>在你的两张 table 之间。我还将 25px 的填充移到了副本的左侧，而不是图像。 (我在这里假设了 img 尺寸)。这在我的 EoA 预览中看起来不错，如果它没有帮助，您可以张贴您的问题的屏幕截图吗？
关于html - HTML 电子邮件的填充问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44939227/