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: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>

非常感谢任何帮助。

问候。

Answer 1

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

Answer 2

试试这些：

标签内的

： img {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”并不总是有效。尝试去除填充并在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>

Answer 5

<img src="" width="600" height="200" style="display:block !important; line-height:0 !important; font-size:0 !important;" />

我发誓这将删除图像周围的所有空格。将在所有电子邮件客户端上像魅力一样工作。

HTML电子邮件中图像之间的空白区域

5 个答案: