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

Question

所以为客户制作了一份时事通讯，我现在在 Outlook 2007、2010、2013、2016 上只有 1 个小错误假设其原因是这些使用 Word 作为呈现引擎。

基本上我有一个 2x2 的网格，每个项目都是 50%，所以所有的东西都坐得很好很舒适，但从外观上看，它要么在图像下方添加空白，要么在我的文本框中添加更多填充 (see screenshot)

这是我对该部分的 HTML：

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

如有任何帮助，将不胜感激。

Answer 1

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

这是工作 fiddle。 https://jsfiddle.net/6LgcnLka/

附上outlook 2013输出的截图

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

Outlook adding whitespace below images or more padding

html

css

email

outlook

newsletter