如何在HTML电子邮件中消除图像和表格单元格周围的空白

Question

我有一个预先设计的HTML电子邮件，我已经切片和编码使用Komodo编辑。所有内容都在一个表中，其中display: block和border-collapse: collapse;已添加到表inline-CSS中，还将line-height: 0px;添加到单元格inline-CSS中。我一直在使用EmailonAcid测试我的超文本标记语言电子邮件，似乎正在发生的事情是，除了Outlook之外，每个电子邮件程序看起来都很好。Outlook在切片图像中添加了额外的空白区域，导致周围的内容/图像变得越界。

<table id="Table_01" style="border: 1px solid #D6D6D7; font-family: sans-serif; font-size: 14px; border-collapse: collapse;" width="800" height="1501" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_01.jpg" width="800" height="312" alt=""></td>
</tr>
<tr>
    <td colspan="6" style="width: 800; height:199px; padding: 20px 10px 0px 15px;">
    <p> ALL MY TEXT GOES HERE</p>
            </td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_03.jpg" width="800" height="37" alt=""></td>
</tr>
<tr>
    <td colspan="2">
        <img style="display: block;" src="images/edm_personalised_02_04.jpg" width="180" height="47" alt=""></td>
    <td colspan="2" style="width: 135px; height: 47; font-size: 12px; text-transform: uppercase;">
    Text here
            <br/>
            <span style="font-weight: bold;">&#163;#XX.XX#</span>
            </td>
    <td colspan="2">
        <img style="display: block;" src="images/edm_personalised_02_06.jpg" width="485" height="47" alt=""></td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_07.jpg" width="800" height="88" alt=""></td>
</tr>
<tr>
    <td colspan="3" style="width: 228px; height: 21px; font-size: 12px; text-transform: uppercase; ">

                &nbsp;
                &nbsp;
                &nbsp;

           text here
            </td>
    <td colspan="3">
        <img style="display: block;" src="images/edm_personalised_02_09.jpg" width="572" height="21" alt=""></td>
</tr>
<tr>
    <td style="width:" 90px;  height: 21px; font-size: 12px;">
    <span style="font-weight: bold;">
                &nbsp;
                &nbsp;
                &#163;#XX.XX#</span>    </td>
    <td colspan="5">
        <img style="display: block;" src="images/edm_personalised_02_11.jpg" width="710" height="21" alt=""></td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_12.jpg" width="800" height="140" alt=""></td>
</tr>
<tr>
    <td colspan="5">
        <img style="display: block;" src="images/edm_personalised_02_13.jpg" width="605" height="48" alt=""></td>
    <td style="width: 195px; height: 48px; font-size: 12px;text-transform: uppercase;">
    text here
            <br/>
            <span style="font-weight: bold; ">&#163;#XX.XX#</span>
            </td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_15.jpg" width="800" height="66" alt=""></td>
</tr>
<tr>
    <td colspan="6" style="width: 800px; height: 145px; font-size: 24px; text-align: center;">
    #dealername#
            <br/>
            #contact_number#</td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_17.jpg" width="800" height="329" alt=""></td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_18.jpg" width="800" height="58" alt=""></td>
</tr>
<tr>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="48" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="87" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="290" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="195" height="1" alt=""></td>
</tr>

​

有没有办法去掉多余的空格？

Answer 1

在表格单元格上尝试style="line-height: 0px;“。

还要仔细检查表格单元格和图像上的宽度和高度是否正确和设置正确。

Answer 2

问题是，切片完整布局有时会为图像创建不必要的空白，因为完整布局切片无法正确调整布局的trs和tds。我建议您需要在dreamweaver中创建一个表，只对所需的图像进行切片并手动放置它们。这将解决您的问题。我在实践中做到了这一点，这对我来说很有效。