CODEWITHSUNDEEP
htmlcssmargin
Nikhil
Nikhil

Reputation: 6643

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>

Upvotes: 23

Views: 35062

Answers (6)

Oleg Abrazhaev
Oleg Abrazhaev

Reputation: 2839

That's some weird behavior of span elements in HTML. If the first span has style text-decoration: underline; then one extra space will be underlined also.

I solved it by changing span to div and applying display: inline-block to divs.

Upvotes: 1

Justin
Justin

Reputation: 66

I know this has been answered, but I would have done this differently - the original HTML is combining display and semantic elements together ( with the italic, H1 and center tags).

I would do the HTML like this:

<div id="output">
  <span class="grade">
    Your grade :
    <span class="total">123</span>/<span class="max">777</span>
    <div class="percentage">23.45%</div>
  </span>
</div>

And the CSS like so:

#output {
    font-style:italic;
    text-align: center;
    font-family : roboto light;
    color : #A4C639;
    font-size : 30px;
    width: 250px;
}

.grade {
    font-size : 25px;
    color: black;
}

.total {
    color : #A4C639;
}

.max {
    margin-left:0;
}

.percentage {
    text-align: center;
    font-size: 200%;
    background : #A4C639;
    color : #FFFFFF;
    padding : 15px;
    border-radius : 15px;
}

This gives you what you were after but the style and layout was done totally in the CSS markup.

If you want to see it in action try this jsfiddle: http://jsfiddle.net/justin_thomas/P6wmJ/19/

It is usually much better to separate your style from your content and semantics. It will make things easier if you ever need to change the layout and so on.

Upvotes: 0

Tony Zampogna
Tony Zampogna

Reputation: 2046

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

Upvotes: 24

Pete
Pete

Reputation: 58432

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

Upvotes: 4

user1857711
user1857711

Reputation: 117

try i{font-size:0}#output span{font-size:30px;} in your css

Upvotes: -2

jsalonen
jsalonen

Reputation: 30481

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>

Upvotes: 49

Related Questions