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 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; } ``` ```

Your grade : 524 /725
72.28%

```

Accepted Answer

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

How to remove the extra space between two span elements?

Solution

Problem