如何仅使用嵌入式样式删除跨度元素之间的空间？

Question

I would like to display a single word "WorldWide" in two colors(red and blue).

I've tried using span elements as below.

<span style="color:red">World</span><span style="color:blue">Wide</span>

but the issue is that the email clients format the html as below so the text ends-up displayed in two words (World Wide instead of WordWide) due the new lines added in the html.

<span style="color:red">World
</span>
<span style="color:blue">Wide
</span>

So my question is: How can I display a single word in two colors considering that the html clients format/add new lines to span elements? Please note that only inline styling is allowed in email clients so I can't use <style></style> tags.

Answer 1

You can float the first element.

 <span style="color:red; float: left;">World</span> <span style="color:blue">Wide</span> 

Answer 2

The float property specifies whether or not a box (an element) should float. You may add the float in your span tag. For your code you just need, float:left with the first span tag.

So it will be

 <span style="color:#FF0000; float: left">World</span> <span style="color:#0D0DFF;">Wide</span> 

Answer 3

I know float doesnt work that well with emails. I know spans are inline blocks but adding the code for inline might make it work.

 <span style="color:red;display:inline-block;">World</span> <span style="color:blue;display:inline-block;">Wide</span> and the rest of the words 

Let me know if this works.