Outlook: Unexplained Spacing Between Headline and Body Paragraph

Question

In each test attempt for an upcoming email campaign, I keep getting spacing in one area that is doubled in all versions of Outlook. However, when I view the email in a separate browser window, the spacing is perfectly fine.

How the coded file should look

How it looks when viewed in all versions of Outlook

The spacing is also fine in other email clients like Gmail, Apple Mail, and mobile.

I've tried ghost tables, removing

tags in the code, etc., with no luck. Here is the section of code in question:

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

Any ideas on how to get Outlook's cooperation on an otherwise simple project?

Answer 1

You have padding on inline elements, namely, spans. e.g. <span style="font-size:18px;padding: 18px 30px 0px;">

Outlook Windows will reject this and only use padding on <table> and <td>. It doesn't accept block-level styles on inline elements like spans, nor does it accept changes to the display (e.g. display:block).

Ensure spacing is only on table structure, or otherwise you can use margins on a <p>.