表格之间的HTML电子邮件空间（Gmail和Outlook） [英] HTML Email spaces between tables (Gmail and Outlook)
本文介绍了表格之间的HTML电子邮件空间（Gmail和Outlook）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建HTML电子邮件，并且正在努力让图像在Outlook和Gmail中呈现。我在Gmail中的表格行之间添加了额外空间的问题，但是将块分配给图像的显示风格，如下所示：
风格= 显示：块;
不起作用。我设法找到的唯一修复方法是在所有td元素上将行高设置为零：
< td style =行高= 0\" >
但是当我这样做时，Outlook会切断所有图像的顶部！是否还有其他修复方法可以使用？
----编辑------
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< title>电子邮件模板< /标题>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0/>
< style type =text / css>
img
{
display：block;
}
< / style>
< / head>
< body style：margin：0; padding：0;>
< table cellpadding =0cellspacing =0width =100％border =0style =border-spacing：0; border：0>
border =0style =border-collapse：collapse; background - 颜色：黑色;填充：0;边界间隔：0;>
< tr style =display：block;>
< td style =padding：0; border：0; border-collapse：collapse; width：20％; margin：0;>
< img src =http：//test..co.za/Custom//images/EMail_logocrop.pngstyle =display：block;/>
< / td>
< td style =color：White;>
如果您在查看此电子邮件时遇到问题< a href =style =color：White;>请点击此处< / a>
< / td>
< / tr>
< tr style =display：block; line-height：0;>
< td colspan =2>
< / td>
< / tr>
< tr>
< td colspan =2>
< img src =http：//test.co.za/Custom//images/EMail_bet.pngstyle =display：block;/>
< / td>
< / tr>
< tr>
< td colspan =2>
< img src =http：//test..co.za/Custom//images/EMail_stand.jpgstyle =display：block;>
< / td>
< / tr>
< tr>
< td colspan =2style =width：100％; line-height：0;>
< / td>
< / tr>
< tr>
< td colspan =2>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop.pngstyle =display：block;/>
< / td>
< / tr>
< tr>
< td colspan =2>
< tr>
< td>
< / td>
< td>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop3.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_chelseacrop.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop4.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_cricketcrop.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop5.pngstyle =display：block;/>
< / td>
< / tr>
< tr>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop6.pngstyle =display：block;/>
< / td>
< td>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop7.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscropchelsea.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop8.pngstyle =display：block;/>
< / td>
< td>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop9.pngstyle =display：block;/>
< / td>
< / tr>
< tr>
< td>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_sharkcrop.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop11.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_arsenalcrop.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop12.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_ligacrop.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop13.pngstyle =display：block;/>
< / td>
< / tr>
< tr style =padding：0px;>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop14.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscropshark.pngstyle =display：block;/>
< / td>
< td>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscroparsenal.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop16.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscropliga.pngstyle =display：block;/>
< / td>
< td>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop17.pngstyle =display：block;/>
< / td>
< / tr>
< tr>
< td colspan =7>
< img src =http：//test..co.za/Custom//images/EMail_grasscrop18.pngstyle =display：block;/>
< / td>
< / tr>
< / table>
< / td>
< / tr>
< tr>
< td colspan =2style =padding-left：10px;>
< img src =http：//test..co.za/Custom//images/EMail_footer.pngstyle =display：block;/>
< / td>
< / tr>
< tr>
< td colspan =2>
< / td>
< / tr>
< / table>
< / table>
解决方案
使用此图像：
style =margin：0; border：0; padding：0; display ：block;
这将防止它们周围有任何间距。如果间距依然存在，那是因为表格本身，特别是微软插入的额外（坏字）。
您是否正在从Outlook发送/转发到Gmail ？如果是这样的话，差距是不可避免的。请参阅此处的类似问题。请注意，表格旁边的表格（在代码中，但在页面上堆叠）会比表格行更大的间距，并通过在包装父元素上设置颜色，可以隐藏分隔时创建的行。
您的代码中有许多额外的东西，您并不需要。只需在样式标记中放置 table td {border-collapse：collapse;} ，那么您只需要这样做：
< table width =100％border =0cellpadding =0cellspacing =0>
< tr>
< td>
< img alt =src =width =height =style =margin：0; border：0; padding：0; display：block;>
< / td>
< / tr>
< / table>
请注意，表格单元需要大约19px的最小值，因为这是最小高度可以在Outlook中。我更喜欢围绕这一设计进行设计，但也有人惹恼行高技巧。
I am creating an HTML Email and am struggling getting images to render in Outlook and Gmail. I have the usual problem of extra space being added between table rows in Gmail however assigning block to the display style of the images like this:
style="display:block;"
does not work. The only fix I managed to find was to set line height to zero on all the td elements:
<td style="line-height=0">
but when I do this Outlook then cuts off all the tops of my images! Are there any other fixes I could use ??
----EDIT------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
img
{
display:block;
}
</style>
</head>
<body style:"margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-spacing:0;border:0">
<table align="center" cellpadding="0" cellspacing="0" width="200"
border="0" style="border-collapse:collapse;background-color:black;padding:0;border-spacing:0;">
<tr style="display:block;">
<td style="padding:0;border:0;border-collapse:collapse;width:20%;margin:0;">
<img src="http://test..co.za/Custom//images/EMail_logocrop.png" style="display:block;"/>
</td>
<td style="color:White;">
If you are having trouble viewing this email <a href="" style="color:White;">click here</a>
</td>
</tr>
<tr style="display:block;line-height:0;">
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_logo.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_bet.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_stand.jpg" style="display:block;">
</td>
</tr>
<tr>
<td colspan="2" style="width:100%;line-height:0;">
<img src="http://test..co.za/Custom//images/EMail_games.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0;" >
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop2.png" style="display:block;" />
</td>
<td>
<img src="http://test..co.za/Custom//images/EMail_pslcrop.png"/ style="display:block;">
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop3.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_chelseacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop4.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_cricketcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop5.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop6.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroppsl.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop7.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropchelsea.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop8.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropt20.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop9.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop10.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_sharkcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop11.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_arsenalcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop12.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_ligacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop13.png" style="display:block;"/>
</td>
</tr>
<tr style="padding:0px;">
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop14.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropshark.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop15.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroparsenal.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop16.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropliga.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop17.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="7" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop18.png" style="display:block;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left:10px;">
<img src="http://test..co.za/Custom//images/EMail_footer.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_grasscropbottom.png" style="display:block;"/>
</td>
</tr>
</table>
</table>
解决方案
Use this for your images:
style="margin: 0; border: 0; padding: 0; display: block;"
That will prevent any spacing around them. If the spacing persists, it is because of the table itself, and in particular the extra (bad word here) Microsoft inserts.
Are you sending/forwarding from Outlook to Gmail? The gaps are unavoidable if that is the case. See similar question here. Note that tables next to tables (in the code, but stacked on page) make bigger gaps than table rows, and by setting the color on a wrapping parent element, you can hide the 'line' created when they separate.
You have a bunch of extra stuff in your code you don't really need. Just put table td {border-collapse: collapse;} in your style tag then all you need is this:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
Just note that table cells need to be a min of about 19px as that is the min-height it can be in Outlook. I prefer to design around that, but some people mess with line-height tricks also.
这篇关于表格之间的HTML电子邮件空间（Gmail和Outlook）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
