Z 布局在右侧 Outlook 2010 和 13 添加奇怪的间距
Z layout adding weird spacing on right side Outlook 2010 & 13
我在 Outlook 中遇到一个关于电子邮件的 Z 布局的奇怪问题。基本上它是在副本顶部添加额外的填充，但仅在布局的右侧。我试过在 margin 和 padding 之间交换并将其更改为不同的元素（在 H6 标签和上面的 TH 标签以及上面的 table 标签上尝试过）。一切似乎都在移动额外的间距，而且它从未真正消失。
在 Outlook 2010 和 2013 中的外观如下：https://www.evernote.com/l/AHEyfSHAvAJAb6LFDbEDYrECrb5NxxzEC_8
这是一个 Codepen 完整的 HTML。
下面是仅包含 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 -->
如果您发现任何可能导致此问题的原因，请告诉我。
由于 Windows Outlook 的最新版本使用 Microsoft Word 来呈现电子邮件，因此通常需要强制强制执行 Web 浏览器刚刚找出的样式。
根据您的代码和上面报告的问题提出两个建议：
- 将内联样式放在尽可能低的级别（不要依赖级联）
- 使用弃用的 HTML 属性，例如 valign 和 align
专门针对您的电子邮件：
将垂直对齐 CSS 放在 <td> 或 <th> 中而不是 <tr>:
<tr style="vertical-align: top;">
<th style=""...>
更改为
<tr style="">
<th style="vertical-align: top;"...>
关于这一点...使用旧的和已弃用的 valign="" 属性将 Outlook 强行强制为垂直对齐：
<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;
对此：
<th class="small-12 large-7 columns first" style="padding: 45px 8px 40px 16px;">
我在 Outlook 中遇到一个关于电子邮件的 Z 布局的奇怪问题。基本上它是在副本顶部添加额外的填充，但仅在布局的右侧。我试过在 margin 和 padding 之间交换并将其更改为不同的元素（在 H6 标签和上面的 TH 标签以及上面的 table 标签上尝试过）。一切似乎都在移动额外的间距，而且它从未真正消失。
在 Outlook 2010 和 2013 中的外观如下：https://www.evernote.com/l/AHEyfSHAvAJAb6LFDbEDYrECrb5NxxzEC_8
这是一个 Codepen 完整的 HTML。
下面是仅包含 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 -->
如果您发现任何可能导致此问题的原因，请告诉我。
由于 Windows Outlook 的最新版本使用 Microsoft Word 来呈现电子邮件，因此通常需要强制强制执行 Web 浏览器刚刚找出的样式。
根据您的代码和上面报告的问题提出两个建议：
- 将内联样式放在尽可能低的级别（不要依赖级联）
- 使用弃用的 HTML 属性，例如 valign 和 align
专门针对您的电子邮件：
将垂直对齐 CSS 放在 <td> 或 <th> 中而不是 <tr>:
<tr style="vertical-align: top;">
<th style=""...>
更改为
<tr style="">
<th style="vertical-align: top;"...>
关于这一点...使用旧的和已弃用的 valign="" 属性将 Outlook 强行强制为垂直对齐：
<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;
对此：
<th class="small-12 large-7 columns first" style="padding: 45px 8px 40px 16px;">