Как удалить дополнительное пространство между двумя элементами span?

enter image description here

Я хочу удалить лишнее пространство между этими двумя элементами. Я пытался, но не мог этого сделать. Это проблема развала маржи?

Как это можно решить? Как удалить лишнее пространство?

Вот мой 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>

Вот мой 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;
}

ОТВЕТЫ

Ответ 1

Похоже, что у вас неправильный заголовок - ваш h1 - это то, что вызывает пробел между текстом и полем процента. Чтобы удалить это, выполните следующие действия:

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

Если это фактически те части, о которых вы говорите, тогда вам нужно удалить любое свободное пространство между ними. См. другие ответы для этого

Ответ 2

Простые символы между элементами HTML создают новый текстовый блок, который отображается как пробел между элементами.

Удалите все пробелы между элементами, чтобы избавиться от него:

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

Кроме того, вы можете заполнить пробелы блоком комментариев:

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

Ответ 3

Поместите теги <span> на одну и ту же строку без пробелов между ними.

Ответ 4

Я знаю, что на это был дан ответ, но я бы сделал это по-другому: исходный HTML объединяет элементы отображения и семантики (с курсивом, H1 и центральными тегами).

Я бы сделал HTML следующим образом:

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

И CSS так:

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

Это дает вам то, что вам нужно, но стиль и макет полностью выполнялись в разметке CSS.

Если вы хотите увидеть его в действии, попробуйте этот jsfiddle: http://jsfiddle.net/justin_thomas/P6wmJ/19/

Как правило, гораздо лучше отделять свой стиль от вашего контента и семантики. Это упростит работу, если вам понадобится изменить макет и т.д.

Ответ 5

Это странное поведение элементов span в HTML. Если первый интервал имеет стиль text-decoration: underline; то еще одно дополнительное пространство будет подчеркнуто.

Я решил это, изменив span на div и применив display: inline-block к divs.

Ответ 6

попробуйте i{font-size:0}#output span{font-size:30px;} в вашем css