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

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.

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

Solution 2

is padding what you are looking for?

span{
padding-left: 15px;
}

Solution 3

Try this CSS:

span{
    margin-right: 10px;
}

Here is Demo: http://jsfiddle.net/84qyG/

Solution 4

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

Solution 5

Consider inserting an empty div in between the 2 span tags?

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

View more solutions

Comments

[starbucks]

Sorry, can't use margin or padding.

[starbucks]

Thanks for answering. I can't use padding or margin because this template will be for an email that will be sent out as a promotion. Emails have poor support for margins and padding so we don't use them.

[Rafael]

Thank you very much. This was literally at the tip of my tongue, but I couldn't get to it.

[Dean Friedland]

Thanks for this answer!

[Jens Alenius]

Remember that will affect the copy and paste if user would like to copy text