Comment supprimer l'espace supplémentaire entre deux éléments span?

Comment supprimer l'espace supplémentaire entre deux éléments span?

Je veux enlever l'espace entre ces deux éléments. J'ai essayé, mais ne pouvait pas le faire.
Est-ce un problème de marge s'effondrer?

Comment cela peut-il être résolu? Comment puis-je supprimer que l'espace supplémentaire?

Voici mon code 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>

Voici mon 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;
}

source d'informationauteur Nikhil

  1. 4

    Il semble que si vous avez pas le bon titre - votre h1 est ce qui est à l'origine de l'espace entre le texte et le pourcentage de la boîte. Pour supprimer essayez ceci:

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

    Si elle a effectivement les travées dont vous parlez, vous devez supprimer tout espace blanc qui est entre eux - Voir les autres réponses pour cette

  2. 29

    Les espaces entre les éléments HTML créer un nouveau bloc de texte qui s'affiche comme un espace entre les éléments.

    Supprimer tous les whitespacing entre les éléments pour se débarrasser d'elle:

    <span id="total"></span><span id="max"></span>

    Alternativement, vous pouvez remplir les espaces avec un bloc de commentaire:

    <span id="total"></span><!--
--><span id="max"></span>
  3. 18

    Mettre le <span> balises sur la même ligne, sans espace entre eux.

  4. 0

    Je sais que cela a été répondu, mais j'aurais fait les choses différemment - l'original de l'HTML est de combiner l'affichage et éléments sémantiques ( avec l'italique, H1 et centre de balises).

    Je voudrais faire le HTML comme ceci:

    <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>

    Et le CSS comme ceci:

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

    Cela vous donne ce que vous avez été au bout mais le style et la disposition a été fait totalement dans le CSS de balisage.

    Si vous voulez le voir en action, essayez ce jsfiddle: http://jsfiddle.net/justin_thomas/P6wmJ/19/

    Il est généralement beaucoup mieux de séparer votre style à partir de votre contenu et la sémantique. Il va rendre les choses plus facile si jamais vous avez besoin de changer la mise en page, et ainsi de suite.

  5. -1

    essayer i{font-size:0}#output span{font-size:30px;} dans votre css