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.
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.
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.
The reason vertical padding /margin does not work with spans is that it's an inline element.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With