在HTML电子邮件中安排3个图像,没有间隙

时间:2015-07-20 22:35:21

标签: html css email outlook

正如您在屏幕截图中看到的那样,我有3行,每行都包含我要在此HTML电子邮件(Zurb Ink)上拼凑的完整图像。

我已经删除了所有填充等,但这是outlook仍然显示它的方式:

enter image description here

JSFIDDLE:http://jsfiddle.net/9j59g602/(虽然在浏览器上看起来很好)

在此处进行编辑和测试:https://putsmail.com/tests/1e3ab350-c1f4-4c22-a178-8372e9ec1851

我尝试过的最新变化是:

border="0" cellspacing="0" cellpadding="0"

对于包含该元素的表和TD,它会继续恢复到此状态。任何其他建议将不胜感激。

这就是它旁边的图像和文字正在使用的内容:

<table class="twelve columns hide-for-small" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td class="nopadding">&nbsp;</td>
    <td class="nopadding" style="padding:0px;"><img src="http://storage.pardot.com/84452/9496/book_top.jpg" alt="" title="" /></td>
</tr>
<tr>
    <td class="eight sub-columns left-text-pad whitebg tbpadding">
        <p><strong>The guide highlights:</strong></p>
        <ul class="highlights" style="margin: 0;">
            <li>The most commonly searched for Audi models</li>
            <li>The fastest growing Audi leasing opportunities</li>
            <li>The most successful contract terms for closing Audi leasing deals</li>
        </ul>
        <span><strong>Make sure you don't miss out, <img src="http://storage.pardot.com/84452/9498/download_btn.jpg" alt="" title="" class="downloadbtn" /><br>your free and exclusive insights guide today.</strong></span>
    </td>
    <td class="four sub-columns rmpadding nolineheight" style="padding:0px;margin:0;">
        <img src="http://storage.pardot.com/84452/9492/book_cover.jpg" alt="" title="" width="214" height="194" valign="top" />
    </td>
  <td class="expander"></td>
</tr>
<tr>
    <td class="nopadding">&nbsp;</td>
    <td class="nopadding" style="padding:0px;"><img src="http://storage.pardot.com/84452/9490/book_bottom.jpg" alt="" title=""  /></td>
</tr>
</table>

1 个答案:

答案 0 :(得分:0)

将此样式添加到图像中。它应该摆脱图像之间的差距。

style="margin:0; border:0; padding:0; display:block;"