链接内边距在HTML电子邮件中的运用

Question

我有一个带有以下标记的表：

<tr id="main_nav">
    <td style="width: 100%" colspan="2">
        <a>Link1</a>
        <a>Link2</a>
        <a>Link3</a>                            
    </td>
</tr>

我需要为这些链接设置内边距，但是我无法使其生效...

CSS：

#main_nav a {
    color: #fff;
    font-weight: bold;  
    padding-left: 1em;
}

我尝试过：将链接包裹在p标签、span标签中，添加CSS display block、display table，在链接上添加padding样式。

不能将每个链接都包裹在<td>标签中！

编辑：尝试使用margin替代padding，没有成功。

- Morpheus

---

我建议您查看The Campaign Monitor Ultimate CSS Support Guide，因为它详细列出了电子邮件客户端支持的CSS内容。 - Andy

是的，这不是你想要重新发明的轮子。试试这个：https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design - Brian Moeskau

Answer 1

我成功地解决了这个问题，方法是将大边框设置为与背景相同的颜色。

border: 10px solid #fff;

- Mike Poole

---

这太聪明了！ - Seega

@Seega，谢谢你，你非常友善。 - Mike Poole

Answer 2

把<a>Link1</a>放在一个div里，然后设置div的padding。如果还不行，尝试改变div的宽度，就像这里一样：http://jsfiddle.net/XWLv6/1/。

- ParPar

---

@Morpheus 你能添加一个 jsfiddle 的例子吗？ - ParPar

当我在浏览器中测试时，它可以工作。但在 Outlook 中却不行。 - Morpheus

我想让这些链接与表格一起展开，但是你的示例给了我使用百分比宽度的想法，而且它起作用了 :) 谢谢 :) - Morpheus

Answer 3

在电子邮件中始终“填充”某些内容的最快方法就是在其中添加几个 。我知道这似乎是不好的做法...除此之外，您可以将它们放入自己的表格中，并使用空列作为填充以获得一致的结果。

- John

Answer 4

如果只是外观的问题，这就是我所做的。

border-right-width: 177px;
border-left-width: 177px;
border-top-width: 10px;
border-bottom-width: 10px;

- Santosh Kadam

Answer 5

在HTML电子邮件中，您必须为所有元素内联CSS。例如：

<a style="color:#fff;font-weight:bold;padding-left:1em;">Link1</a>

- samanthasquared

Answer 6

在#main_nav a中添加display:block;

- Chadwick13