Question

我正在学习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>

Answer 1

尝试制作盒子大小：border-box;按钮容器中的属性，然后尝试保留它们

Answer 2

只需将border-radius和bgcolor的定义移到按钮本身，就可以在padding上添加td，这样就可以了。使用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>

Answer 3

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

并不羞耻

 

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

顺便说一句，我不知道你是否在测试电子邮件客户端的范围，但如果你需要使用Outlook和类似的工具，那么像border-radius这样的CSS将不会被尊重。这是一个很安全的指南：https://www.campaignmonitor.com/css/

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

3 个答案: