表格之间的 HTML 电子邮件空间（Gmail 和 Outlook）答案

【问题标题】：HTML Email spaces between tables (Gmail and Outlook)表格之间的 HTML 电子邮件空间（Gmail 和 Outlook）
【发布时间】：2014-07-02 13:08:45
【问题描述】：

我正在创建一个 HTML 电子邮件，并且正在努力让图像在 Outlook 和 Gmail 中呈现。我有一个常见的问题是在 Gmail 中的表格行之间添加了额外的空间，但是将块分配给图像的显示样式，如下所示：

style="display:block;"

不起作用。我设法找到的唯一解决方法是将所有 td 元素的行高设置为零：

<td style="line-height=0">

但是当我执行此操作时，Outlook 会切断我图像的所有顶部！还有其他我可以使用的修复吗？？

----编辑-----

    <!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>

【问题讨论】：

您能在问题中添加更多 HTML 吗？尝试找到答案会很有帮助。
@Mikey 你有没有得到这个工作？我正在尝试一切无济于事。
我知道那是很久以前的事了，但请在此处查看我的答案：stackoverflow.com/a/41549253/1939671

标签： html css email outlook gmail

【解决方案1】：

您是否考虑过使用http://htmlemailboilerplate.com/ - 它有助于消除您在构建 HTML 电子邮件时遇到的许多问题。

这将有助于规范跨许多客户的电子邮件，让您完成实际的构建。

【讨论】：

【解决方案2】：

将此用于您的图像：

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

这将防止它们周围出现任何间距。如果间距仍然存在，那是因为表格本身，尤其是 Microsoft 插入的额外（这里是坏词）。

您是从 Outlook 发送/转发到 Gmail 吗？如果是这样的话，差距是不可避免的。见similar question here。请注意，表格旁边的表格（在代码中，但堆叠在页面上）比表格行产生更大的间隙，并且通过在包装父元素上设置颜色，您可以隐藏它们分开时创建的“线”。

您的代码中有一堆您并不真正需要的额外内容。只需将table td {border-collapse: collapse;} 放入您的样式标签中，您所需要的就是：

<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>

请注意，表格单元格的最小高度必须约为 19 像素，因为这是它在 Outlook 中的最小高度。我更喜欢围绕它进行设计，但有些人也会使用行高技巧。

【讨论】：

border-collapse 应该在桌面上，而不是 td。