表格顶部的HTML电子邮件填充Outlook 2010

Question

我想构建一个有点复杂的html电子邮件，我遇到了填充问题。

我有一个三个单元格的表。第一个单元格是左侧的间隔单元格。第二个单元格中有一个表格来保存文本。第三个单元格有一个CTA按钮（图像）。

中心单元格顶部有额外的填充，我无法弄清楚它来自哪里。

我的目标是在中间单元格顶部填充4px，在右侧单元格填充8px。这样，中间单元格中标题文本底部的边框（“单元中的随机副本”）与右侧单元格中的CTA按钮对齐。

当我在Outlook 2010和Gmail IOS应用程序中测试时，看起来好像在中间单元格上有额外的填充（看起来像是缩进填充的两倍）。

<table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0"> 
         <tr> 
          <td width="142"></td> 
          <td width="310" style="padding: 0;"> 
           <table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpading="0"> 
            <tr> 
             <td width="325" colspan="2" style="border-collapse:collapse; border-bottom: 1px solid #000; font-size: 14px; padding-top: 4px;"> 
               Random Copy In Cell 
             </td> 
            </tr> 
            <tr> 
             <td> 
              <table bgcolor="#ccd6df" width="160" border="0" cellpadding="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;"> 
               <tr> 
                <!-- Model Specs --> 
                <td style="padding-bottom: 2px; padding-top: 4px"> 
                 <p style="font-size: 11px; margin-bottom: 0;"> 
                  <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Headline Copy</span> 
                 </p> 
                </td> 
               </tr> 
               <tr> 
                <td style="text-align: left; padding-left: 10px; padding-bottom: 10px;"> 
                 <p style="font-size: 9px; padding-left: 2px; padding-top: 0; margin-top: 0; margin-bottom: 2px;"> 
                  - The first selling point 
                  <br /> - The second selling point 
                  <br /> - The third sell point/ 
                  <br />&nbsp;&nbsp;The fourth selling point 
                  <br /> - Selling point 
                 </p> 
                </td> 
                <!-- Model Specs --> 
               </tr> 
              </table> 
             </td> 
             <td> 
              <table bgcolor="#ccd6df" width="140" border="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;"> 
               <tr> 
                <!-- Model Specs --> 
                <td style="padding-bottom: 0px; padding-top: 4px;"> 
                 <p style="font-size: 11px; margin-bottom: 0;"> 
                  <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Another selling point</span> 
                  <span style="font-size: 9px; padding-top: 0; margin-top: 0; margin-bottom: 2px;"> 
                  <br />&nbsp;&nbsp;&nbsp;&nbsp;- Another selling point </span> 
                  <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Selling point</span> 
                  <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Last selling point</span> 
                  <br /> 
                  <br /> 
                  <br /> 
                  <br /> 
                 </p> 
                </td> 
               </tr> 
              </table> 
             </td> 
            </tr> 
           </table> 
          </td>         
          <td width="125" valign="top" style="padding-top: 8px;"> 
           <a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a> 
          </td> 
         </tr></table> 

Answer 1

这是在过去<td>的style="padding-top: 8px;"这是造成问题。它更改为这解决了在Outlook 2007/10/13和Gmail的问题：

 <td width="125" valign="top"> 
      <table cellspacing="0" cellpadding="0" border="0"> 
       <tr> 
        <td style="padding-top: 8px;"> 
         <a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a> 
        </td> 
       </tr> 
      </table> 
     </td> 

不知道是什么代码，你有你的片段之外，但在<head>添加几个CSS重置将有助于防弹此进一步。我加了一些你的例子，这里是其全部代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <style> 
 
     /* What it does: Remove spaces around the email design added by some email clients. */ 
 
     /* Beware: It can remove the padding/margin and add a background color to the compose a reply window. */ 
 
     html, 
 
     body { 
 
      margin: 0 auto !important; 
 
      padding: 0 !important; 
 
      height: 100% !important; 
 
      width: 100% !important; 
 
     } 
 
     /* What it does: Stops Outlook from adding extra spacing to tables. */ 
 
     table, 
 
     td { 
 
      mso-table-lspace: 0pt !important; 
 
      mso-table-rspace: 0pt !important; 
 
     } 
 
     /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */ 
 
     table { 
 
      border-spacing: 0 !important; 
 
      border-collapse: collapse !important; 
 
      table-layout: fixed !important; 
 
      margin: 0 auto !important; 
 
     } 
 
     table table table { 
 
      table-layout: auto; 
 
     } 
 
    </style> 
 
</head> 
 
    
 
<body width="100%" style="margin: 0;"> 
 
\t <table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
      <td width="142" style="line-height: 0; font-size: 0;">&nbsp;</td> 
 
      <td width="310" valign="top" bgcolor="red"> 
 
       <table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpadding="0"> 
 
        <tr> 
 
         <td width="325" colspan="2" style="border-collapse:collapse; border-bottom: 1px solid #000; font-size: 14px; padding-top: 4px;"> 
 
           Random Copy In Cell 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
          <table bgcolor="#ccd6df" width="160" border="0" cellpadding="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;"> 
 
           <tr> 
 
            <!-- Model Specs --> 
 
            <td style="padding-bottom: 2px; padding-top: 4px"> 
 
             <p style="font-size: 11px; margin-bottom: 0;"> 
 
              <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Headline Copy</span> 
 
             </p> 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td style="text-align: left; padding-left: 10px; padding-bottom: 10px;"> 
 
             <p style="font-size: 9px; padding-left: 2px; padding-top: 0; margin-top: 0; margin-bottom: 2px;"> 
 
              - The first selling point 
 
              <br /> - The second selling point 
 
              <br /> - The third sell point/ 
 
              <br />&nbsp;&nbsp;The fourth selling point 
 
              <br /> - Selling point 
 
             </p> 
 
            </td> 
 
            <!-- Model Specs --> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td> 
 
          <table bgcolor="#ccd6df" width="140" border="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;"> 
 
           <tr> 
 
            <!-- Model Specs --> 
 
            <td style="padding-bottom: 0px; padding-top: 4px;"> 
 
             <p style="font-size: 11px; margin-bottom: 0;"> 
 
              <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Another selling point</span> 
 
              <span style="font-size: 9px; padding-top: 0; margin-top: 0; margin-bottom: 2px;"> 
 
              <br />&nbsp;&nbsp;&nbsp;&nbsp;- Another selling point </span> 
 
              <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Selling point</span> 
 
              <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Last selling point</span> 
 
              <br /> 
 
              <br /> 
 
              <br /> 
 
              <br /> 
 
             </p> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td>         
 
      <td width="125" valign="top"> 
 
       \t <table cellspacing="0" cellpadding="0" border="0"> 
 
        <tr> 
 
        \t <td style="padding-top: 8px;"> 
 
        \t \t <a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a> 
 
        \t </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>