电子邮件 HTML 行之间的空间答案

【问题标题】：Email HTML Space between rows电子邮件 HTML 行之间的空间
【发布时间】：2021-10-13 21:13:35
【问题描述】：

我的目的是创建一个包含不同表的主表。这种设计专注于通过电子邮件发送 HTML。

这是我的 HTML 代码：

<table width="620" align="center" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table width="620"  border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="top" width="310">
                                <a href="https://www.nestlefamilyclub.es/?utm_source=BdD&utm_medium=email&utm_content=Header_Logo_NFC&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank" title="Nestlé Family Club">
                                    <img width="310" style="display:block" border="0" src="../img/211006_Nestle_Dark_Cupon_01.jpg" alt="Nestlé Family Club">
                                </a>
                            </td>
            
                            <td valign="top">
                                 <a href="https://nestlefamilyclub.es/marca/nestle-dark?utm_source=BdD&utm_medium=email&utm_content=Header_Logo_NestleDark&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank"  title="Nestlé Dark">
                                    <img width="310" src="../img/211006_Nestle_Dark_Cupon_02.jpg" alt="Nestlé Dark">
                                </a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr>
                <td>
                    <img width="620" src="../img/211006_Nestle_Dark_Cupon_03.jpg" alt="Nescafé">
                </td>                   
            </tr>



 <tr>
        <table bgcolor="#70584b" width="620" align="center" cellspacing="0" cellpadding="0" border="0">
          <tr>
              <td bgcolor="#70584b" width="620" style="padding:0">
                    <img width="620" src="https://mi.nestle.es/gallery/120725221210600168/211006_Nestle_Dark_Cupon_10.jpg" alt="Nescafé" style="display: block; border:0"/>
               </td>
           </tr>
         </table>
                  
  </tr>
                                
                  
   <tr>
        <table width="620" align="center" cellspacing="0" cellpadding="0" border="0">
                      
           <tr>
                 <td bgcolor="#3a1301" width="37" style="padding:0">
                       <img width="37" src="https://mi.nestle.es/gallery/120725221210600168/211006_Nestle_Dark_Cupon_11.jpg" alt="Nescafé" style="display: block; border:0"/>                   
                  </td>
        
                   <td bgcolor="#000000" style="padding:0">
        
                       <a style="text-decoration: none;" href="https://nestlefamilyclub.es/marca/nestle-dark?utm_source=BdD&utm_medium=email&utm_content=D1_DescubreNuevosNestleDark&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank" title="A">
                              
                         <table bgcolor="#000000" width="500" align="center" cellspacing="0" cellpadding="0" border="0">
                              <tr>
                                    <td align="center" style="padding:0">
                                          <p style="font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold'; font-size:21px; color: #ffffff; font-weight: normal;">
                                            <span style="color:#efb952">XXXXXXXX</span>
                                         </p>
                                     </td>
                               </tr>
                                  
                                  <tr>
                                       <td align="center" style="padding:0">
                                           <p style="font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold'; font-size:21px; color: #ffffff; font-weight: normal;">
                                             <span style="color:#efb952">XXXXXXXX</span>
                                           </p>
                                       </td>
                                  </tr>
        
                                    <tr>
                                        <td align="center" style="padding:0">
                                            <p style="font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold'; font-size:21px; color: #ffffff; font-weight: normal;">
                                                XXXXXXXX,
                                            </p>
                                        </td>
                                    </tr>
        
                                    <tr>
                                        <td align="center" style="padding:0">
                                            <p style="font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold'; font-size:21px; color: #ffffff; font-weight: normal;">
                                                XXXXXXXX.
                                            </p>
                                        </td>
                                    </tr>
                                   
                             </table>
                          </a>
                      </td>
              </tr>
        </table>
    </tr>
 </table>

在我的最后几行中，我的 Outlook 客户端上有这么大的空间。

当我在 Outlook 客户端上看到此代码时，它显示一行与另一行之间有很大的空间。

希望有人能帮帮我！

【问题讨论】：

标签： html outlook html-email

【解决方案1】：

每个图像都需要display:block，即<img ... style="display:block" ...>。有关更详细的讨论，另请参阅 Why not to use "vertical-align: top;" instead of "display: block;" on <img> in emails?。

您可能还需要将padding:0 添加到<td>'s，因为某些电子邮件客户端有少许填充。

如果您想让它响应手机，您需要允许图像以最大宽度或宽度：100% 响应，例如<img ... style="display:block;max-width:100%;height:auto" ...>

出于测试目的，这适用于 Outlook 2007-19 (Windows) 和 Outlook Android、iOS：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    <table width="620" align="center" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table width="620"  border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="top" width="310">
                                <a href="https://www.nestlefamilyclub.es/?utm_source=BdD&utm_medium=email&utm_content=Header_Logo_NFC&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank" title="Nestlé Family Club">
                                    <img width="310" style="display:block" border="0" src="https://via.placeholder.com/310x100" alt="Nestlé Family Club">
                                </a>
                            </td>
            
                            <td valign="top">
                                 <a href="https://nestlefamilyclub.es/marca/nestle-dark?utm_source=BdD&utm_medium=email&utm_content=Header_Logo_NestleDark&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank"  title="Nestlé Dark">
                                    <img width="310" style="display:block" src="https://via.placeholder.com/310x100" alt="Nestlé Dark">
                                </a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr>
                <td>
                    <img width="620" src="https://via.placeholder.com/620x100" alt="Nescafé">
                </td>                   
            </tr>
 </table>
</body>
</html>

【讨论】：

感谢您的提示，但它似乎还没有工作。我添加了 display:block 每个图像，正如你告诉我的，padding:0 到 td's。关于 valign 值，我将其删除。我不知道我是否需要其他东西来避免行之间的空格。
我已经测试过了，它可以工作。也许你有其他代码如<style> CSS 干扰？
是的，你是对的，但是当我想向我的主表添加一些额外的数据时，它似乎再次创建了空间。
你可以通过我帖子的最新更新看到我在说什么。