How to remove “Invisible space” from HTML [duplicate]

Answer 1

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>

Answer 2

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 3

See http://jsfiddle.net/RhvjF/2/

HTML:

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

CSS:

#wrapper{
    font-size:0;
}
#wrapper>*{
    font-size:16px; /* Or whatever you want */
}