边距 space 与 <td> 中的元素内容背景颜色相同

Question

我正在 Mailchimp 中设计一个邮件并且想要并排放置两个按钮。因此，我插入了一个代码块并在其中复制了常规按钮元素，然后复制了 td 标签并将其粘贴到第一个 td 标签下方。然后我将 "margin-left: 80px" 放在第二个按钮的样式中以在两者之间获得 space （在尝试左右对齐之后但这没有用）。

我希望两个按钮之间有白色（正文背景）space，但按钮之间的 space 与按钮本身的颜色相同。

<table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;border-radius: 3px;background-color: #F59B29;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
  <tbody>
      <tr>
          <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
              <a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;display: block;">More information</a>
          <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
              <a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;margin-left: 80px;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;display: block;">More information</a>

          </td>
      </tr>
  </tbody>
</table>

有人知道为什么边距 space 不是背景颜色吗？

Answer 1

为此，您应该使用填充而不是边距

Answer 2

使用此代码..希望这对您有所帮助，如果您想要更多定制，您可以添加自己的.. 试试这个：

 <table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; width:550px;">
            <tbody>
                <tr>
                    <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; width:100%">
                        <a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="background-color: #F59B29;border-radius:3px;font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;width:45%; padding:8px 10px;display: block; float:left;">More information</a>
                        <a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="background-color: #F59B29;border-radius:3px; font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;margin-left:10px;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding:8px 10px;display: block; width:45%; float:left;">More information</a>
                    </td>

                </tr>
            </tbody>
        </table>

Answer 3

这是最好的方法 it.You 在第一个锚标记后缺少结束 td。

我从 table 中删除了背景颜色并将其添加到 td 的
从锚标记中删除了 80px 的左边距
将边框半径移至 td 的

您可以将我放置的空白 td 的宽度更改为您想要的任何宽度。

<table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;border-radius: 3px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
  <tbody>
      <tr>
          <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F59B29;border-radius: 3px;">
              <a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;display: block;">More information</a></td>
          <td width="20"></td><!-- to create space -->
          <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F59B29;border-radius: 3px;">
              <a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;display: block;">More information</a>

          </td>
      </tr>
  </tbody>
</table>

希望对您有所帮助。

边距 space 与 <td> 中的元素内容背景颜色相同

Margin space same color as element content background in <td>

html

css

mailchimp