How to remove "Invisible space" from HTML [duplicate]

Question

Possible Duplicate:
A Space between Inline-Block List Items

I have a JSFiddle demo of my html code. Here is the code here:

<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>​

The problem I'm having is that an extra space is being inserted between the 'o' and the 'r' in Hello World!. The display style is set to none, so can someone please tell me how I can get the Hello World! phrase without the space?

Answer 1

The linebreaks are causing it - http://jsfiddle.net/RhvjF/1/

Can't find the particular post, but smart people suggested 3 ways of fixing it:

1. Put everything in one line (remove all line breaks)

2. Comment out the line breaks, like

   <span style="display: inline">Hello Wo</span><!--
   --><span style="display: none;"></span><!--
   --><span style="display: inline">rld</span>
   

3. Set the container font-size to 0 and re-set it for span-s

UPDATE

There are at least 2 more ways:

1. Break the tags, like

   <span style="display: inline">Hello Wo</span
   ><span style="display: none;"></span
   ><span style="display: inline">rld</span>
   

2. Float the elements, i.e. span { float: left }

Answer 2

This is caused by line breaks. You have two choices:

1. Remove the line breaks
2. Float your content.

Option 1

<span style="display: inline">Hello Wo</span><span style="display: none;"></span><span style="display:inline">rld</span>​

Option 2

<style>
    #spanContainer > span { float:left; }​
</style>

<div id="spanContainer">
    <span style="display: inline">Hello Wo</span>
    <span style="display: none;"></span>
    <span style="display: inline">rld</span>​
</div>