Outlook在图片下方添加空格或更多填充

Question

所以为一个客户制作了一个简报，我现在在Outlook 2007,2010,2013,2016上只有一个小小的错误，假设其原因是这些使用Word作为渲染引擎。

基本上我有一个2x2网格，每个项目都是50％，所以所有人都很好看，但是看起来好像是在图片下面添加空格或者在我的文本框中添加更多填充(see screenshot)

以下是该部分的HTML：

＆＃13;

＆＃13;

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
  <tbody>

    <tr>
      <td width="50%" background="#8f5470" bgcolor="#8f5470" style="padding-left:45px; padding-right:45px; padding-top:20px; padding-bottom:20px;">
        <h4 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">we take care of every detail</h4>
        <p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Everything from design and planning through to manufacturing and installation, and where required assisting you to appoint a builder for the required preparatory works.</p>
        <p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">We are dedicated to making it as easy as possible for you.</p>
      </td>
      <td width="50%" class="show-for-large"><img src="http://aproposconservatories.co.uk/wp-content/themes/apropos_new/images/newsletter/detail-img.jpg" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"></td>
    </tr>
  </tbody>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
  <tbody>
    <tr>
      <td width="50%" class="show-for-large"><img src="http://aproposconservatories.co.uk/wp-content/themes/apropos_new/images/newsletter/benefits-img.jpg" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"></td>
      <td width="50%" background="#0599a8" bgcolor="#0599a8" style=" padding-left:45px; padding-right:45px; padding-top:20px; padding-bottom:20px;">
        <h4 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">we can offer benefits to our clients</h4>
        <p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">In conjunction with Barclays we are able to offer a number of financial solutions, helping our customers stay in control of their cash flow.</p>
        <p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">As members of the IBGCo we offer consumer protection at point of sale and throughout the ten year guarantee period. Providing total peace of mind.</p>

      </td>
    </tr>

  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

提前感谢任何帮助。

Answer 1

我已将mso-padding-alt: 0px 45px;添加到文本的父td。

这是工作小提琴。 https://jsfiddle.net/6LgcnLka/

我附上了Outlook 2013中的输出屏幕截图