如何在html中为邮件的span之间添加空格？

Question

我正在制作电子邮件模板，所以我可以做的事情有限。

我已经有了align="center"，但我仍然需要在两个跨度之间添加空间。 我如何才能做到这一点？

CODE:

<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>

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

Answer 1

不是所有的邮件客户端都支持页边距。我过去在padding方面也有一些轻微的不一致，尽管它确实有效。

可能看起来像一个黑客（但无论如何，电子邮件的html不就是这样吗？）--在电子邮件中最安全的方法是使用多个   一起这样。   .

我还会用 <font> 标签，而不是 <span>，他们更一致。

Answer 2

你要找的是padding吗？

span{
padding-left: 15px;
}

Answer 3

试试这个CSS。

span{
    margin-right: 10px;
}

这里是演示。http:/jsfiddle.net84qyG

Answer 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>

注意到微妙的& nbsp; 跨度之间。

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

Answer 5

我相信你实际上要找的是

display: block;

前。http:/jsfiddle.netkshreve5jNGu。

另一种方法是在上面添加 <br/> 后的关闭跨度。

编辑：你也应该考虑添加CSS类，以减少多余的样式设计

Answer 6

无论是使用多个非空格字符还是间隔图像都可以解决你的问题。

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

Answer 7

你可以使用padding或margin。http:/jsfiddle.nettpXF4

<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>

Answer 8

可以考虑在2个span标签之间插入一个空div？

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

Answer 9

如果你使用的是jsxReact，你可以使用回勾。

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

只需在文本的开头（或结尾）添加一个空白处即可