Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 514
starbucks Avatar asked May 22 '13 17:05

starbucks


People also ask

Can we add width to span tag?

The <span> tag is a inline element, it fits into the flow of the content and can be distributed over multiple lines. We can not specify a height or width or surround it with a margin.

How do you put a space between two inline elements?

You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element. Inline elements can actually appear within block elements, as shown below. I've added white padding on the left and right side of each inline element.

Can we apply margin and padding to span?

The reason vertical padding /margin does not work with spans is that it's an inline element.

What is the correct element for spacing in HTML?

Use a margin to space around an element. This adds space outside of the element. So background colours, borders etc will not be included. If you want to add spacing within an element use padding instead.


1 Answers

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

I'd also use <font> tags instead of <span>, they are more consistent.

like image 61
John Avatar answered Sep 18 '22 13:09

John