web-dev-qa-db-fra.com

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

enter image description here

Je veux supprimer l'espace supplémentaire entre ces deux éléments. J'ai essayé mais je n'ai pas pu le faire. Est-ce un problème de réduction de la marge?

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

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

Il semble que vous ayez un mauvais titre - votre h1 est la cause de l’espace entre le texte et la case de pourcentage. Pour supprimer, essayez ceci:

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

S'il s'agit réellement des portées dont vous parlez, vous devez supprimer tout espace blanc qui les sépare - Voir les autres réponses à cette question.

4
Pete

Les caractères blancs entre les éléments HTML créent un nouveau bloc de texte, affiché sous forme d'espace entre les éléments.

Supprimez tous les blancs entre les éléments pour vous en débarrasser:

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

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

<span id="total"></span><!--
--><span id="max"></span>
31
jsalonen

Placez les balises <span> sur la même ligne, sans espace entre elles.

18
Tony Zampogna

C’est un comportement étrange des éléments span en HTML. Si la première étendue a le style text-decoration: underline;, un espace supplémentaire sera également souligné.

Je l'ai résolu en remplaçant span par div et en appliquant display: inline-block à divs.

0
Oleg Abrazhaev

Je sais que cela a été répondu, mais j'aurais fait cela différemment - le code HTML d'origine combine des éléments d'affichage et sémantiques (avec les balises italic, H1 et center).

Je ferais le HTML comme ça:

<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 les CSS aiment bien:

#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 recherchiez mais le style et la mise en page ont été entièrement réalisés dans le balisage CSS. 

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

Il est généralement préférable de séparer votre style de votre contenu et de votre sémantique. Cela facilitera les choses si vous avez besoin de changer de mise en page, etc.

0
Justin