电子邮件中的高度按钮

Question

我在电子邮件中遇到高度按钮问题。

当我在浏览器按钮中打开html文件时，它会正确显示。

html in browser

然而，当涉及到电子邮件时，客户太狭窄了。

html in e-mail

我的代码

<tr>
<td align="center">
<a href="{guest_tracking_url}?id_order={order_name}" style="background-color: #ee1000; color:#ffffff; display:block; width:220px; font-size:14px; line-height:40px; text-decoration:none; margin-top:20px;" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=sk&amp;q={guest_tracking_url}?id_order={order_name}">Zistiť aktuálny stav objednávky
</a>
</td>
</tr>

Answer 1

使用padding代替width

padding: 10px 20px; /* something like that */

<强>更新

这是我今天早上收到的一封电子邮件：

color: #fff!important;
text-decoration: none;
border: 0;
border-radius: 8px;
background: #651a84;
line-height: 1em;
padding: 18px 30px;
display: inline-block;

Answer 2

使用填充，如下：

padding: 20px 30px;

您的文字将在按钮中垂直居中。

Answer 3

浏览器可能有一些默认填充，您的电子邮件客户端的渲染引擎没有。所以简单地用padding手动设置它。

在你的情况下，你可能想要指定上/下和左/右的填充：padding: 5px 10px这将导致5px上/下和10px左右：随意定义一个invidivual填充到每一边，这在这里可能没有多大意义，但也可以通过像padding: 1px 2px 3px 4px那样顺时针方向传递（结果：1px顶部，2px右边，3px底部，4px左侧）

Answer 4

删除行高并添加填充

padding: 10px 15px;

Answer 5

感谢您的提示。

但是当我向按钮添加填充时，在太近的按钮周围发短信：/

img