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>