保证金空间与元素内容背景颜色相同

时间:2017-08-03 09:42:45

标签: html css mailchimp

我正在Mailchimp中设计一个邮件,并希望并排使用两个按钮。因此,我插入了一个代码块并复制了常规按钮元素,然后复制了td标记并将其粘贴到第一个td标记下面。然后我把" margin-left:80px"以第二个按钮的样式在两者之间获得空间(在尝试左右对齐但这不起作用)。

我希望两个按钮之间有一个白色(背景)空间,但按钮之间的空间与按钮本身的颜色相同。



<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>
&#13;
&#13;
&#13;

有人知道为什么边距空间不是背景颜色吗?

3 个答案:

答案 0 :(得分:1)

使用此代码..希望此帮助,如果您想要更多自定义,您可以添加自己的.. 试试这个:

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

答案 1 :(得分:0)

为此,你应该使用填充而不是边距

答案 2 :(得分:0)

这是最好的方法。你在第一个锚标记之后缺少关闭td。

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

您可以将空白td i的宽度更改为您想要的任何颜色。

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

希望有所帮助。