Zレイアウトの右側に奇妙な間隔を追加するOutlook 2010と13

Question

メールでZレイアウトを使用するOutlookで奇妙な問題が発生しています。基本的には、余分なパディングをコピーの上に追加しますが、レイアウトの右側にのみ追加します。私はマージンとパディングを入れ替えて、さまざまな要素に変更しようとしました（H6タグとその上のTHタグ、それ以上のテーブルで試しました）。すべてがちょうど余分なスペースを動かすようであり、決してそれは実際には消えません。

は、ここでは、Outlook 2010と2013年にどのように見えるかです：

https://www.evernote.com/l/AHEyfSHAvAJAb6LFDbEDYrECrb5NxxzEC_8はここで完全なHTMLとCodepenです。以下は

だけZのレイアウトを含むスニペットです：

<!-- ARTICLE 1 
       LAYOUT = COPY > IMAGE 
       TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 1 --> 
        <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"> 
        <tbody> 
         <tr style="padding: 0; text-align: left; vertical-align: top;"> 
         <th class="small-12 large-5 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; padding-top: 40px; text-align: left; width: 225.66667px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;"> 
           <a href="http://partners.bluebeam.com/extremeconference/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
           <!-- ^^^ ADD ARTICLE 1 LINK ABOVE --> 
            <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-right-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 

           <!-- REPLACE CONTENT BELOW FOR ARTICLE 1 --> 
           Last Chance to Register! 
           </a></h6> 
            <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">There’s only one month left to get 50% off registration for the Bluebeam eXtreme Conference. Don't miss this opportunity to connect with customers. <a href="http://partners.bluebeam.com/extremeconference/" target="_blank" 
             style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">Register today >></a></p> 
            <!-- END OF CONTENT FOR ARTICLE 1 --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         <th class="small-12 large-7 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; text-align: left; width: 322.33333px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <a href="http://partners.bluebeam.com/extremeconference/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
            <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-1-excon-V3.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 
            </a> 
            <!-- ^^^ ADD IMAGE 1 URL --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         </tr> 
        </tbody> 
        </table> 
        <!-- END ARTICLE 1 --> 

        <!-- ARTICLE 2 
       LAYOUT = IMAGE > COPY 
       TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 2 --> 
        <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"> 
        <tbody> 
         <tr style="padding: 0; text-align: left; vertical-align: top;"> 
         <th class="small-12 large-7 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; text-align: left; width: 322.33333px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <a href="http://partners.bluebeam.com/2016/07/sellmoretoexistingcustomers/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
            <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-2-steve.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 
            </a> 
            <!-- ^^^ ADD IMAGE 2 URL --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         <th class="small-12 large-5 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; padding-top: 50px; text-align: left; width: 225.66667px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;"> 
           <a href="http://partners.bluebeam.com/2016/07/sellmoretoexistingcustomers/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
           <!-- ^^^ ADD ARTICLE 2 LINK ABOVE --> 
            <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-left-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 

           <!-- REPLACE CONTENT BELOW FOR ARTICLE 2 --> 
           Steve's Sales Tips 
           </a></h6> 
            <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Your next opportunity could be closer than you think. Learn how to engage your existing customers with <a href="http://partners.bluebeam.com/2016/07/sellmoretoexistingcustomers/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">these strategies >></a></p> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         </tr> 
        </tbody> 
        </table> 
        <!-- END ARTICLE 2 --> 

        <!-- ARTICLE 3 
       LAYOUT = COPY > IMAGE 
       TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 3 --> 
        <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"> 
        <tbody> 
         <tr style="padding: 0; text-align: left; vertical-align: top;"> 
         <th class="small-12 large-5 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; padding-top: 45px; text-align: left; width: 225.66667px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;"> 
           <a href="http://partners.bluebeam.com/rallyday/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
           <!-- ^^^ ADD ARTICLE 3 LINK ABOVE --> 
            <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-right-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 

           <!-- REPLACE CONTENT BELOW FOR ARTICLE 3 --> 
           Rally Day Is Heating Up! 
           </a></h6> 
            <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">We are now halfway through our Rally Day US qualifying period. Keep driving sales as we approach the final stretch. Not registered yet? <a href="http://partners.bluebeam.com/rallyday/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">Sign up here >> </a></p> 
            <!-- END OF CONTENT FOR ARTICLE 3 --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         <th class="small-12 large-7 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; text-align: left; width: 322.33333px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <a href="http://partners.bluebeam.com/rallyday/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
            <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-3-rally-day.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 
            </a> 
            <!-- ^^^ ADD IMAGE 1 URL --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         </tr> 
        </tbody> 
        </table> 
        <!-- END ARTICLE 3 --> 
        <!-- ARTICLE 2 
       LAYOUT = IMAGE > COPY 
       TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 2 --> 
        <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"> 
        <tbody> 
         <tr style="padding: 0; text-align: left; vertical-align: top;"> 
         <th class="small-12 large-7 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; text-align: left; width: 322.33333px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <a href="mailto:partners@bluebeam.com" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
            <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-4-cool-down.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 
            </a> 
            <!-- ^^^ ADD IMAGE 2 URL --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         <th class="small-12 large-5 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; padding-top: 20px; text-align: left; width: 225.66667px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;"> 
           <a href="mailto:partners@bluebeam.com" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
           <!-- ^^^ ADD ARTICLE 2 LINK ABOVE --> 
            <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-left-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 

           <!-- REPLACE CONTENT BELOW FOR ARTICLE 2 --> 
           Cool Down With Bluebeam This Summer 
           </a></h6> 
            <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Host a Bluebeam-themed Happy Hour, complete with a Revu presentation. We’ll send the koozies, you’ll bring the customers! Contact your <a href="mailto:partners@bluebeam.com" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">Partner Relations Specialist</a>          to learn more.</p> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         </tr> 
        </tbody> 
        </table> 
        <!-- END ARTICLE 2 --> 

は、あなたがこれを引き起こしている可能性があります何を見たら、私に教えてください。

Answer 1

最近のバージョンのWindows Outlookでは電子メールのレンダリングにMicrosoft Wordを使用しているため、Webブラウザで把握しているスタイルを強要する必要があります。

上記の二つの報告あなたのコードと問題に基づいた提案： - 可能な限り低いレベルでのインラインスタイルを入れて（カスケードに依存しない） - 使用してHTMLを具体的にvalignとalign

などの属性depracatedあなたの電子メールのために：代わりに<tr>の<td>または<th>で

---

置き、垂直配向CSS：

<tr style="vertical-align: top;"> 
    <th style=""...> 

そのノートオン

<tr style=""> 
    <th style="vertical-align: top;"...> 

---

への変更...ブルートフォース古いを使用した垂直配向へのOutlookとvalign=""属性を非推奨：

<th valign="top" style="vertical-align: top;"...> 

---

そして、各行のパディングが電子メールは一致します。これに

<th class="small-12 large-7 columns first" style="padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; padding-top: 45px; 

：単純化されたバージョンは、ここから行くことができるのvalignを強制

<th class="small-12 large-7 columns first" style="padding: 45px 8px 40px 16px;">