如何在两个活动按钮之间添加空间答案

【问题标题】：How do I add space between two active buttons如何在两个活动按钮之间添加空间
【发布时间】：2016-11-09 17:06:53
【问题描述】：

我正在学习 HTML 以在工作中设置电子邮件活动。我从网上的响应式模板中提取了一些元素。我有以下代码块，显示两个按钮。它们并排显示，中间没有边距。我尝试了很多不同的事情，但都没有运气。

<td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px; border-radius:8px;" bgcolor="#8B0000">
                                                <a target="_blank" style="text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;" href="http://www.holidayvacations.net/index.php?page=catalog">Request a Catalog!</a>
                                            </td>


<td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px; border-radius:8px;" bgcolor="#8B0000">
                                                <a target="_blank" style="text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;" href="http://www.holidayvacations.net/hvadmin/uploads/Flip_Books/Catalog/Catalog.html">View Online Catalog!</a>
                                            </td>

【问题讨论】：

标签： html responsive-design html-email

【解决方案1】：

尝试制作 box-sizing:border-box;按钮容器中的属性，然后尝试为它们设置边距

【讨论】：

我已经使用 (
) 做到了，但没有运气。
是因为我使用的是“填充”诗句边框吗？我现在就试试。
看，你的标记可能是
css: .container {box-sizing:border-box;宽度：; }
对不起，css: .container {box-sizing:border-box;宽度：;高度：; } .btn1 {margin-right:; } 或 padding-right

【解决方案2】：

只需将border-radius 和bgcolor 的定义移动到按钮本身，然后您可以在td 上添加padding 就可以了。使用padding:

<table>
  <tr>
    <td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px; padding-right:5px; ">
      <a target="_blank" style="text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;background-color:#8B0000;border-radius:8px;" href="http://www.holidayvacations.net/index.php?page=catalog">Request a Catalog!</a>
    </td>


    <td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px;padding-left: 5px;">
      <a target="_blank" style="background-color:#8B0000;text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;border-radius:8px;" href="http://www.holidayvacations.net/hvadmin/uploads/Flip_Books/Catalog/Catalog.html">View Online Catalog!</a>
    </td>
  </tr>
</table>

【讨论】：

【解决方案3】：

在电子邮件设计中，使用不间断空格字符并不丢人

&nbsp;

在你需要的地方强制一个空间。所有电子邮件客户端都倾向于尊重这一点，它比指定一些客户端忽略或覆盖的填充和边距要可靠得多。

顺便说一句，我不知道您是否在电子邮件客户端范围内进行测试，但如果您需要使其与 Outlook 和类似的功能一起使用，那么像border-radius 这样的css 将不会受到尊重。这是关于什么是安全的相当好的指南：https://www.campaignmonitor.com/css/

【讨论】：