【发布时间】：2016-07-15 22:38:25
【问题描述】：
我在 Outlook 中遇到了一个奇怪的问题，电子邮件的 Z 布局。基本上它是在副本顶部添加额外的填充，但仅在布局的右侧。我尝试在边距和填充之间交换并将其更改为不同的元素（在 H6 标记和上方的 TH 标记以及上方的表格上尝试过）。一切似乎都在移动额外的间距，但实际上从未消失。
它在 Outlook 2010 和 2013 中的外观如下：https://www.evernote.com/l/AHEyfSHAvAJAb6LFDbEDYrECrb5NxxzEC_8
这是一个带有完整 HTML 的Codepen。
以下是仅包含 Z 布局的 sn-p：
<!-- 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 -->
如果您发现任何可能导致此问题的原因，请告诉我。
【问题讨论】：
标签： html outlook html-email outlook-2010