如何在电子邮件的 html 中的 span 之间添加空格？答案

【问题标题】：How do I add space between span in html for emails?如何在电子邮件的 html 中的 span 之间添加空格？
【发布时间】：2013-05-17 21:31:49
【问题描述】：

我正在制作电子邮件模板，所以我的能力有限。

我有 align="center" 但我仍然需要两个跨度之间的空间。我该怎么做？

代码：

<td width="659" height="28" bgcolor="#999999" align="center">
    <span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
    CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
    font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
     font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
            </td>

注意：我不能在电子邮件模板中使用边距或填充。

【问题讨论】：

在 span 样式中尝试：margin: 10px 或类似。
这给了你一个空间。如果需要多个空格，可以使用&nbsp; entity。
如果不能使用margin或padding，那&nbsp;呢？
@sharklike 我正在使用但我需要至少 10px 的空间。不确定使用是否是一个好习惯模仿 10 像素的空间。

标签： html css email html-email

【解决方案1】：

并非所有电子邮件客户端都支持保证金。过去我在填充方面也有一些轻微的不一致，尽管它确实有效。

可能看起来像一个 hack（但不是 html 用于电子邮件吗？） - 电子邮件中最安全的方法是一起使用多个 &nbsp;，如下所示：&nbsp;&nbsp;&nbsp;。

我也会使用<font> 标签而不是<span>，它们更加一致。

【讨论】：

非常感谢。这简直是在我的舌尖，但我无法做到。
感谢您的回答！

【解决方案2】：

正在填充您要查找的内容吗？

span{
padding-left: 15px;
}

【讨论】：

抱歉，不能使用边距或内边距。
请记住，如果用户想复制文本会影响复制和粘贴

【解决方案3】：

试试这个 CSS：

span{
    margin-right: 10px;
}

这里是演示：http://jsfiddle.net/84qyG/

【讨论】：

【解决方案4】：

考虑这样做：

<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span>&nbsp;<span style="color: #ffffff;
 font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
        </td>

注意细微之处跨度之间。

不知道为什么你不能使用边距。另外，您使用 td 是否有原因？我猜它是表格的一部分？

【讨论】：

感谢您的回答。我不能使用填充或边距，因为此模板将用于作为促销发送的电子邮件。电子邮件对边距和填充的支持很差，因此我们不使用它们。

【解决方案5】：

我相信你真正要找的是

display: block;

例如。 http://jsfiddle.net/kshreve/5jNGu/

您可以这样做的另一种方法是在结束跨度之后添加<br/>。

编辑：您还应该考虑添加 CSS 类以减少多余样式的数量

【讨论】：

【解决方案6】：

考虑在两个 span 标签之间插入一个空的 div 吗？

.spacer {
    display: inline-block;
    width: 10px;
}

【讨论】：

【解决方案7】：

使用多个非换行符或间隔图像可以解决您的问题。

<span style="">text #1</span><img src="images/spacer.gif" alt="" border="0" width="10" height="1" /><span style="">text #2</span>

【讨论】：

【解决方案8】：

您可以使用填充或边距： http://jsfiddle.net/tpXF4/

<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;padding-right:30px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
 font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
        </td>

【讨论】：

【解决方案9】：

如果你使用的是 jsx/React，你可以使用反引号：

<span>{` My text...`}</span>

只需添加一个空格即可开始您的文本（或结束您的文本）

【讨论】：