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

Question

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

Answer 1

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: .
I'd also use <font> tags instead of <span>, they are more consistent.

Answer 2

is padding what you are looking for?
span{
padding-left: 15px;
}

Answer 3

Try this CSS:
span{
margin-right: 10px;
}
Here is Demo: http://jsfiddle.net/84qyG/

Answer 4

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?

Answer 5

I believe what you are actually looking for is
display: block;
Ex. http://jsfiddle.net/kshreve/5jNGu/
Another way you could do this is to add <br/> after the closing spans.
Edit: You should also look into adding CSS classes to reduce the amount of redundant styling

Answer 6

Consider inserting an empty div in between the 2 span tags?
.spacer {
display: inline-block;
width: 10px;
}

Answer 7

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>

Answer 8

You could use padding or margin:
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>

Answer 9

If you are using jsx/React you can use back ticks:
<span>{` My text...`}</span>
Just add a whitespace to start your text (or end your text)