How to remove the extra space between two span elements?

Question

I want to remove the extra space between these two elements. I tried but couldn't do it. Is this a problem of margin collapsing?

How can this be solved? How can I remove that extra space?

Here is my html :

 <div id="output">        <i>          <span id="grade">Your grade :</span>          <span id="total"></span>          <span id="max"></span>         <center><h1><span id="percentage"></span></h1></center>        </i>     </div>   

Here is my css:

body { width:250px; height:100px; background : #F2F2F2; }  #output  { font-family : roboto light ; color : #A4C639; font-size : 30px; }  #grade { font-size : 25px; color : black; }  #max { color : black; }  #percentage { background : #A4C639; color : #FFFFFF; padding : 15px; border-radius : 15px; } 

Answer 1

Whitespace characters between HTML elements create a new text block, which is displayed as a space between the elements.

Remove all the whitespacing between the elements to get rid of it:

<span id="total"></span><span id="max"></span> 

Alternatively, you can fill the whitespaces with a comment block:

<span id="total"></span><!-- --><span id="max"></span> 

Answer 2

Put the <span> tags on the same line without any space between them.