title: How to remove the extra space between two span elements?
body: <p><img src="https://i.stack.imgur.com/ktWGf.png" alt="enter image description here"></p>
  
  <p>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?</p>
  
  <p>How can this be solved? How can I remove that extra space?</p>
  
  <p><strong>Here is my html :</strong></p>
  
  <pre><code> &lt;div id="output"&gt;
         &lt;i&gt;
           &lt;span id="grade"&gt;Your grade :&lt;/span&gt;
           &lt;span id="total"&gt;&lt;/span&gt;
           &lt;span id="max"&gt;&lt;/span&gt;
          &lt;center&gt;&lt;h1&gt;&lt;span id="percentage"&gt;&lt;/span&gt;&lt;/h1&gt;&lt;/center&gt;
         &lt;/i&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p><strong>Here is my css:</strong></p>
  
  <pre><code>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;
  }
  </code></pre>