展望：标题和正文段落之间无法解释的间距

Question

在即将进行的电子邮件营销活动的每次测试尝试中，我不断在一个区域中获得间距，该间距在所有版本的 Outlook 中都会加倍。但是，当我在单独的浏览器窗口中查看电子邮件时，间距非常好。

在 Gmail、Apple Mail 和移动设备等其他电子邮件客户端中，间距也很好。

我尝试过幽灵表、删除代码中的

标签等，但没有成功。这是有问题的代码部分：

<table style="width: 100%;" cellspacing="0" cellpadding="0">
    <tr>
        <th style="width: 50%; padding-left: 30px; padding-right: 0px;" class="responsive-td" valign="top">
            <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; "
                class="stylingblock-content-wrapper">
               
              <tr>
                                <td align="left"> 
                                    <span style="font-size:18px;padding: 18px 30px 0px;"><table border="0" cellpadding="0" cellspacing="0" width="100%"; style="padding: 18px">
 
  <tr>
   <td>
    <span style="font-size:22px; line-height: 140%; padding: 30px 0px;"><b>This is a test headline</b></span></td></tr><tr>
   <td>
    <p style="line-height: 120%;"> 
      <span style="font-size:14px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam massa, elementum quis risus pretium, tempor tristique justo. Quisque malesuada, ex eget varius iaculis, sem metus fermentum enim, vel feugiat sem orci vitae neque. Cras vulputate ante in dolor consequat ullamcorper nec eget elit.</span></td></tr></table></span></p>
 
                                </td>
                            </tr>
              
            </table>
        </th>
        <th style="width: 50%; padding-left: 0px;" class="responsive-td" valign="top">
            <table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; "
                class="stylingblock-content-wrapper">
                <tr>
                    <td style="padding: 18px 30px 0px; " class="stylingblock-content-wrapper camarker-inner">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                          
                          
                           <tr>
                    <td class="stylingblock-content-wrapper camarker-inner">
                        <table cellpadding="0" cellspacing="0" width="100%" border="0">
                            <tr>
                                <td align="left">
                                    <img data-assetid="65628"
                                        src="https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fHww&w=1000&q=80"
                                        style="display: block; padding: 0px; text-align: left; height: auto; width: 100%; border: 0px none transparent;"
                                        width="300"><p style="line-height: 100%;">
     <span style="font-size:12px;"></span></p><p style="line-height: 100%;">
     <span style="font-size:12px;"><em>This is a subheading.</em></span></p><p></p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                          
                            
                        </table>
                    </td>
                </tr>
            </table>
        </th>
    </tr>
</table>

对于如何在一个简单的项目上获得 Outlook 的合作有什么想法吗？

Answer 1

内联元素上有填充，即跨度。例如

<span style="font-size:18px;padding: 18px 30px 0px;">

Outlook Windows 将拒绝此操作，并且仅在

<table>

和

<td>

上使用填充。它不接受像 span 这样的内联元素上的块级样式，也不接受对显示的更改（例如 display:block）。

确保间距仅在表格结构上，否则您可以在

<p>

上使用边距。