Search code examples
htmlcssmargin

How to remove the extra space between two span elements?

enter image description here

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 and 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;
}
<div id="output">
  <i>
    <span id="grade">Your grade :</span>
    <span id="total">524</span>
    <span id="max">/725</span>
    <center><h1><span id="percentage">72.28%</span></h1></center>
  </i>
</div>

Solution

  • It looks as if you have the wrong title - your h1 is what is causing the space between the text and the percentage box. To remove try this:

    #output h1 {margin-top:0; padding-top:0;}

    If it actually the spans you are talking about then you need to remove any white space that is between them - See the other answers for this