如何在电子邮件的 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:42:03  来源:igfitidea点击:

How do I add space between span in html for emails?

htmlcssemailhtml-email

提问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 &nbsp;together like so: &nbsp;&nbsp;&nbsp;.

可能看起来像一个黑客(但无论如何不是电子邮件的 html?) - 电子邮件中最安全的方法是&nbsp;像这样一起使用多个:&nbsp;&nbsp;&nbsp;.

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>&nbsp;<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;
}