HTML电子邮件中的图像上方和下方都出现了空格

Question

我在3列1行表中看到两个图像上方和下方的间隙。中间列中有文本，相邻列中有两个图像。以下是它的外观和相关代码。我已按照此处的建议尝试了style="display:block"和边框折叠，但两者都没有效果。任何人都可以建议吗？

问题在于：

以下是代码：

   <table width="600" border="0" cellspacing="0" cellpadding="0" height="25"><tr><td height="25" colspan="4"><img src="images/South-West-Email-vz2_09.jpg" width="600" height="25" alt="Boarder" /></td></tr></table><table width="600" height="261" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="32" height="261"><img style="display: block;margin-bottom:0" src="images/South-West-Email-v2_06.jpg" width="32" height="261" alt="boarder" /></td><td bgcolor="#FFFFFF" class="Content" width="355" align="left" height="0" valign="top" style="padding-left: 10px; padding-right: 3px; padding-top: 8px;"><span class="Devname" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #257847; line-height: 17px;">Ilfracombe- Lantern Court </span><br /><span class="beds" style="font-size: 15px; font-family: Arial, Helvetica, sans-serif; line-height: 18px;">1 bedroom at £230,000 (2 remaining)<br />2 bedroom at £310,000 (1 remaining)</span><br/><br/><span class="Devdescript" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px;">Boasting a cliff top location with stunning views of Ilfracombe Harbour, Lantern Court is a beautiful, contemporary Retirement Living development of 42 one and two bedroom apartments.</span><br/><br/><span class="Devdescript" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px;">Lantern Court was 'highly commended' in the best retirement scheme category at the Housebuilder Awards 2012. Lantern Court is a truly iconic new development, well located on the historic harbour of Ilfracombe.</span></td><td valign="top" width="213" height="261"><a href="http://www.mccarthyandstone.co.uk/retirement-properties-for-sale/lantern-court-ilfracombe/?utm_source=mccarthyandstone&amp;utm_medium=email&amp;utm_content=south_west_september&amp;utm_campaign=email " style="color: #277A4B; text-decoration: none;"><img  style="display:block; margin-bottom:0" src="images/South-Wezxst-Email-v2_12.jpg" alt="Move For Free" width="213" height="261" border="0" /></a></td></tr></table><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td height="25" colspan="4"><img style="display: block;" src="images/South-Wezxst-Email-v2_13.jpg" width="600" height="25" alt="boarder" /></td></tr></table>

我的CSS：

<style type="text/css"> a:visited {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: none;} body,td,th {font-family: Arial, Helvetica, sans-serif;} table{border-collapse: collapse;} td{border:none;}</style>

Answer 1

我认为可以使用border-collapse CSS属性解决此问题。这会为表格设置折叠边框模型。

所以，在你的CSS中添加这个

table {
    border-collapse: collapse;
}
td {
    border:none;
}

试试..

修改

检查fiddle

请为您的图片添加样式vertical-align: bottom;。

即

img
{
    vertical-align: bottom;
}