0

我正在开发一个 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:steve@antequera-inland.com" 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>

非常感谢任何帮助。

问候。

4

4 回答 4

2

试试这些：

标签内：img{display: block;}

标签上：

和提示：如果您有可编辑的文本，请尝试使用 line-height 并输入一个小于字体大小的数字。行高可能会弄乱表格并创建白线。

于 2014-10-10T19:50:26.053 回答
1

Try using display:block; as an inline style for all the images.

于 2013-06-19T12:33:11.953 回答
1

有时将“显示：块”单独添加到 img 标签并不总是有效的。尝试移除填充并在 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>
于 2017-05-02T15:42:16.320 回答
0

尝试从标签周围删除所有空白区域，以便获得如下内容：

<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" 添加到每个图像。

于 2012-06-06T19:36:44.777 回答