电子邮件模板中图像之间的空白间距答案

【问题标题】：White Spacing between images in email template电子邮件模板中图像之间的空白间距
【发布时间】：2023-04-06 10:25:01
【问题描述】：

我正在开发一个电子邮件模板，但我已经尝试了我所知道的一切来消除电子邮件模板中图像之间的2px 差距，从更改<td> 的背景颜色到添加内联样式以摆脱的间距，但似乎没有任何工作可以请有人帮忙。谢谢

<table style="background-color: #EBEBEA;" width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__180.jpg" width="599" height="66" alt="Logo" style="width: 100%; height: auto; display: block; border: 0" /></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566__180.jpg" width="41" height="66" alt="Follow  On Twitter" style="width: 100%; height: auto; display: block; border: 0"/></a>
    </td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__180.jpg" width="28" height="66" alt="Follow  On Facebook" style="width: 100%; height: auto; display: block; border: 0"/></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566__180.jpg" width="27" height="66" alt="Follow  On LinkedIn" style="width: 100%; height: auto; display: block; border: 0"/></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__180.jpg" width="27" height="66" alt="Follow  On Instagram" style="width: 100%; height: auto; display: block; border: 0"/></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566__180.jpg" width="29" height="66" alt="Follow  On Medium" style="width: 100%; height: auto; display: block; border: 0"/></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__180.jpg" width="49" height="66" alt="Email A with any questions" style="width: 100%; height: auto; display: block; border: 0"/></a></td> 
  </tr>
</table>

【问题讨论】：

这个问题很难重现，因此很难帮助你解决这个问题，你能否改进提供给这个问题的工作示例的代码？

标签： html css email templates spacing

【解决方案1】：

请从用作内联样式的<img> 中删除height: auto;。

height: auto; 覆盖height="66"。

<table style="background-color: #EBEBEA;" width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__180.jpg" width="599" height="66" alt="Logo" style="width: 100%;  display: block; border: 0" /></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566__180.jpg" width="41" height="66" alt="Follow  On Twitter" style="width: 100%; display: block; border: 0"/></a>
    </td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__180.jpg" width="28" height="66" alt="Follow  On Facebook" style="width: 100%; display: block; border: 0"/></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566__180.jpg" width="27" height="66" alt="Follow  On LinkedIn" style="width: 100%; display: block; border: 0"/></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__180.jpg" width="27" height="66" alt="Follow  On Instagram" style="width: 100%; display: block; border: 0"/></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566__180.jpg" width="29" height="66" alt="Follow  On Medium" style="width: 100%;  display: block; border: 0"/></a></td>

    <td style="padding: 0; line-height: 5px;" align="left"><a href=""><img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__180.jpg" width="49" height="66" alt="Email A with any questions" style="width: 100%; display: block; border: 0"/></a></td> 
  </tr>
</table>

【讨论】：

【解决方案2】：

尝试将display: block 添加到<a> 标记。然后将宽度和高度移动到属性style=""。

如果这没有帮助，问题可能是图像本身的大小。对我来说它看起来像这样：enter image description here

我还想指出，<img> 标签中的高度调整是 2 倍。不应该是这样的。

【讨论】：