如何在电子邮件的 html 跨度之间添加空格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16698412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add space between span in html for emails?
提问by starbucks
I am making email templates so I am limited with what I can do.
我正在制作电子邮件模板，所以我的能力有限。
I've got align="center" but I still need space between the two spans. How can I do this?
我有 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>
NOTE: I can't use margins or padding in email templates.
注意：我不能在电子邮件模板中使用边距或填充。
回答by John
Margin is not supported in all email clients. I've also had some slight inconsistencies in padding in the past, although it does work.
并非所有电子邮件客户端都支持保证金。过去我在填充方面也有一些轻微的不一致，尽管它确实有效。
Might seem like a hack (but isn't html for email that anyway?) - safest way in email is to use multiple together like so: .
可能看起来像一个黑客（但无论如何不是电子邮件的 html？） - 电子邮件中最安全的方法是 像这样一起使用多个： .
I'd also use <font>tags instead of <span>, they are more consistent.
我也会使用<font>标签而不是<span>，它们更加一致。
回答by dsuess
is padding what you are looking for?
正在寻找什么填充？
span{
padding-left: 15px;
}
回答by Nishu Tayal
Try this CSS:
试试这个 CSS：
span{
margin-right: 10px;
}
Here is Demo: http://jsfiddle.net/84qyG/
这是演示：http: //jsfiddle.net/84qyG/
回答by Captain Skyhawk
Consider doing this:
考虑这样做：
<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>
Notice the subtle & nbsp; between the spans.
注意细微之处 跨度之间。
Not sure why you can't use margins though. Also, is there a reason you're using td? I'm guessing it's part of a table?
不知道为什么你不能使用边距。另外，您是否有使用 td 的原因？我猜它是桌子的一部分？
回答by kshreve
I believe what you are actually looking for is
我相信你真正要找的是
display: block;
Ex. http://jsfiddle.net/kshreve/5jNGu/
前任。http://jsfiddle.net/kshreve/5jNGu/
Another way you could do this is to add <br/>after the closing spans.
另一种方法是<br/>在结束跨度之后添加。
Edit: You should also look into adding CSS classes to reduce the amount of redundant styling
编辑：您还应该考虑添加 CSS 类以减少冗余样式的数量
回答by hmhcreative
Either using multiple non-break-space characters or spacer image can solve your problem.
使用多个非中断空格字符或间隔图像可以解决您的问题。
<span style="">text #1</span><img src="images/spacer.gif" alt="" border="0" width="10" height="1" /><span style="">text #2</span>
回答by hmhcreative
You could use padding or margin: http://jsfiddle.net/tpXF4/
您可以使用填充或边距：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>
回答by Jim Bash
Consider inserting an empty div in between the 2 span tags?
考虑在 2 个 span 标签之间插入一个空的 div？
.spacer {
display: inline-block;
width: 10px;
}
