如何在Salesforce Marketing Cloud中为内容块添加外部白色内边距

核心逻辑是给现有带背景色的内容块套一层无背景色的父容器表格，利用父容器的padding实现白色内边距，避免直接给带背景的表格加padding导致背景范围扩大的问题，同时这个父容器也能保证内容块与其他相邻块之间产生20px间距。

修改步骤： #

• 新增一个无背景色的外层表格，宽度设为100%，cellpadding、cellspacing均为0
• 在该表格的<td>中设置padding:20px;，这部分就是需要的白色内边距
• 将原有的带背景色（#DDF0F2）的完整表格作为子元素放入这个父<td>内

修改后的完整代码： #

<!-- 新增的无背景父容器，提供白色内边距 -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding:20px;">
      <!-- 原有的带背景色内容块 -->
      <table bgcolor="#DDF0F2" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td style="color:#086C78; font-family: Montserrat, Verdana, sans-serif; line-height:1.2; font-weight: 800; text-align:center; padding: 20px 20px 10px 20px;">
            <h1>
              Use your %%=v(@creditAmount)=%% travel credit</h1>&nbsp;<p style="font-family: Nunito, Verdana, sans-serif; color: #086C78; font-size: 16px; line-height: 1.5; font-weight: 700; margin: 0px 20px 0px 20px; text-align: center;">
              Enter the code %%=v(@promoCode)=%% when you checkout at <a alias="Evolve" href="https://evolve.com/" style="font-family: Nunito, Verdana, sans-serif; color: #086C78; font-size: 16px; line-height: 1.5; font-weight: 700; margin: 0px; text-align: center;">evolve.com</a> to get more bang for your budget. Your credit expires on %%=v(@expirationDate)=%%.</p></td></tr><tr>
          <td style="padding-left: 20px; padding-right: 20px; padding-top:20px; padding-bottom:20px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td align="center" bgcolor="#093F45" class="block noLeftRightPad padBot20" style="background: #093F45; border-radius: 4px 4px 4px 4px; padding-left:20px; padding-right: 20px; padding-top:15px; padding-bottom:15px; vertical-align:middle;" valign="middle" width="50%">
                  <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td align="center" class="mobilefont-16-18" style="font-family:Nunito,Arial,Helvetica,sans-serif; color:#ffffff; font-size:18px; line-height: 18px; font-weight: 900; padding-bottom:10px;">
                        Travel Credit</td></tr><tr>
                      <td align="center" class="mobilefont-29-44" style="font-family:Nunito,Arial,Helvetica,sans-serif; color:#ffffff; font-size: 36px; font-weight: 900; line-height: 36px;padding-bottom:10px;">
                        %%=v(@UnappliedTC)=%%</td></tr><tr>
                      <td align="center" class="mobilefont-16-18">
                        <span style="font-family:'Montserrat',Arial,Helvetica,sans-serif; color:#ffffff; font-size:14px; line-height: 18px;">Expires on:</span> <span style="font-family:'Montserrat',Arial,Helvetica,sans-serif; color:#ffffff; font-size:14px; line-height: 18px; font-weight:600;">%%=v(@validThrough)=%%</span></td></tr></table></td><td align="center" class="block" width="20">
                  <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td style="padding-left: 20px;">
                        &nbsp;</td></tr></table></td><td align="center" bgcolor="#FFFFFF" class="block noLeftRightPad" style="background-color: #FFFFFF;border-radius: 4px 4px 4px 4px; padding-left:20px; padding-right: 20px; padding-top:15px; padding-bottom:15px; vertical-align:middle;" valign="middle" width="50%">
                  <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td align="center" class="mobilefont-16-18" style="font-family:'Montserrat',Arial,Helvetica,sans-serif; color:#086C78; font-size:14px; line-height: 18px;padding-bottom:15px;">
                        Apply Promo Code:</td></tr><tr>
                      <td align="center" class="mobilefont-29-44" style="font-family:Nunito,Arial,Helvetica,sans-serif; color:#086C78; font-size:24px; line-height: 36px; font-weight: 900;padding-bottom:15px;">
                        %%=v(@promoCode)=%%</td></tr><tr>
                      <td align="center" class="mobilefont-16-18" style="font-family:'Montserrat',Arial,Helvetica,sans-serif; color:#086C78; font-size:14px; line-height: 18px;">
                        Upon checkout at <a alias="evolve" href="%%=RedirectTo(@evolve)=%%" style="color:#1ab2c5;text-decoration:underline;" target="_blank">evolve.com</a>.</td></tr></table></td></tr></table></td></tr></table>
    </td>
  </tr>
</table>

关键说明： #

• 新增的父表格没有设置bgcolor，默认继承邮件的白色背景，所以padding:20px会呈现为白色内边距
• 原有带背景色的表格完全保留内部样式，不会受到父容器的影响
• 当这个内容块被动态插入时，父容器的padding会自动和其他相邻内容块形成20px的间距，无需额外设置

内容的提问来源于stack exchange，提问作者Susan