Html电子邮件格式问题
我有一个3列的html电子邮件表，请参见下面的代码，所有内容都在同一行上对齐，除了一个问题，它们在最后一列的顶部有一个间隙。从2007-2013年的展望来看，差距变得相当严重，差距基本上变得更大 我的问题是如何消除这个差距，以便更仔细地查看问题所在，并将鼠标悬停在第三列上 这里是可视的 展望2007 展望2013 CSS重置Html电子邮件格式问题,html,Html,我有一个3列的html电子邮件表，请参见下面的代码，所有内容都在同一行上对齐，除了一个问题，它们在最后一列的顶部有一个间隙。从2007-2013年的展望来看，差距变得相当严重，差距基本上变得更大 我的问题是如何消除这个差距，以便更仔细地查看问题所在，并将鼠标悬停在第三列上 这里是可视的 展望2007 展望2013 CSS重置 table {border-spacing:0;} table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
table {border-spacing:0;}
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
table td, table tr { border-collapse: collapse; }
<tr>
<td align="center" valign="top" class="fix-box">
<!-- start LAYOUT-5 container width 600px -->
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container">
<tbody><tr>
<td valign="top" width="100%">
<!-- start LAYOUT-5 container width 560px -->
<table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width">
<!-- start image and content -->
<tbody><tr>
<td valign="top" width="100">
<!-- start content left -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image5_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold; text-align:left;
padding-left: 15px; padding-right: 15px;">
Embroidery
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style="color: #5f294f; font-weight: bold;
text-decoration: none;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="color: #5f294f; font-weight: 300;
text-decoration: none;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody>
</table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content left -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content center -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content center -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content Right -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="right" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content right -->
</td>
</tr>
<!-- end image and content -->
</tbody></table>
<!-- end LAYOUT-5 container width 560px -->
</td>
</tr>
</tbody></table>
<!-- end LAYOUT-5 container width 600px -->
</td>
</tr>
您应该删除行之间两个空表的高度。通常，在时事通讯中定义高度是一种糟糕的策略！此外，在新闻稿的空白单元格中，始终添加两个空格字符
<!-- start space width -->
<table class="remove" width="200" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" style="font-size: 0;line-height:
0;border-collapse: collapse;"> </td>
</tr>
</tbody></table>
<!-- end space width -->
很高兴有人改了这个帖子的名字。也许OP可以提供一个有用的名称。如果有人能帮我解决这个问题，我将非常遗憾。上面的代码只是问题发生的地方的一个片段。嗯，我已经在codepen.io上查看了您的代码，在那里看起来还可以。也许一个屏幕截图可以帮助我们解决这个问题：比现在旧的IE不尊重空电池。我经常得到一个空间，就像我接受了你的建议一样，但我用两个空的空间将间隔高度降低到1px。对于最后一列，我现在只需删除height属性，它的外观和工作都非常完美，感谢这一技巧。另外，我想补充一点，我个人避免使用像素百分比来定义宽度，因此它很紧凑。由于大多数客户不接受gmail这样的响应性设计，我认为不值得冒险使用百分比宽度。此外，我使用我的css总是内联的，有一些工具可以内联您的css。祝你好运，伙计。