HTML电子邮件中的图片之间留有空白

Question

我正在制作一个HTML电子邮件模板。由于某些原因，Outlook中的图片左边有白色的空间，而Gmail中的图片下方有白色的空间。

我已经尝试了这里列出的许多建议，但都不奏效。

这里是一些代码，我指的是太。

<tr>
    <td colspan="12">
        <img src="http://www.antequera-inland.com/email-template/images/_01.gif" width="600" height="172" alt=""/></td>
</tr>
<tr>
    <td colspan="4" rowspan="4">
        <img src="http://www.antequera-inland.com/email-template/images/_02.gif" width="348" height="120" alt=""/></td>
    <td colspan="7">
        <a href="http://www.skype.com" title="Chat or call us via Skype" target="_blank"
            onmouseover="window.status='Chat or call us via Skype';  return true;"
            onmouseout="window.status='';  return true;">
            <img src="http://www.antequera-inland.com/email-template/images/skype-link.gif" alt="Chat or call us via Skype" name="Chat-or-call-us-via-Skype" width="233" height="26" border="0" /></a></td>
    <td rowspan="12">
        <img src="http://www.antequera-inland.com/email-template/images/_04.gif" width="19" height="591" alt=""/></td>
</tr>
<tr>
    <td colspan="7">
        <a href="mailto:[email protected]" title="Send us as email" target="_blank"
            onmouseover="window.status='Send us as email';  return true;"
            onmouseout="window.status='';  return true;">
            <img src="http://www.antequera-inland.com/email-template/images/Email-Steve.gif" alt="Send us as email" name="Send-us-as-email" width="233" height="22" border="0" /></a></td>
</tr>
<tr>
    <td colspan="7">
        <a href="http://www.antequera-inland.com" title="Visit Antequera Inland website" target="_blank"
            onmouseover="window.status='Visit Antequera Inland website';  return true;"
            onmouseout="window.status='';  return true;">
            <img src="http://www.antequera-inland.com/email-template/images/www.antequera-inland.com.gif" alt="Visit Antequera Inland website" name="Visit-Antequera-Inland-website" width="233" height="23" border="0" /></a></td>
</tr>

任何帮助是非常感激的。

Regards.

Answer 1

试试这些。

在标签内：img{display: block;}。

在标签上。

还有一个小窍门：如果你有可编辑的文本，尝试使用行高，并放一个比字体大小更小的数字。"行高 "可能会扰乱表格，并创建白线。

Answer 2

尝试使用display:block;作为所有图片的内联样式。

Answer 3

试着把标签周围的所有白色空间去掉，这样你就会得到类似的东西。

<tr>
    <td colspan="7"><a href="http://www.antequera-inland.com" title="Visit Antequera Inland website" target="_blank" onmouseover="window.status='Visit Antequera Inland website';  return true;" onmouseout="window.status='';  return true;"><img src="http://www.antequera-inland.com/email-template/images/www.antequera-inland.com.gif" alt="Visit Antequera Inland website" name="Visit-Antequera-Inland-website" width="233" height="23" border="0" /></a></td>
</tr>

给每张图片加上style="display: block"。

Answer 4

有时单独在img标签中添加 "display: block "并不总是有效。试着去掉padding，并在img的容器周围设置一个低线高。比如说

<td style="background-color: #a3a5a8; padding: 0; line-height: 10px;">
 <img src="http://www.example.com/images/header.png" style="width: 600px; height: 274px; display: block;" alt="header logo">
</td>