如何消除两个跨度元素之间的额外空间？

Question

我想删除这两个元素之间的额外空间.我试过但不能这样做.这是保证金崩溃的问题吗？

怎么解决这个问题？如何删除多余的空间？

这是我的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;
}

Answer 1

HTML元素之间的空白字符创建一个新的文本块,它显示为元素之间的空格.

删除元素之间的所有whites间距以摆脱它:

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

或者,您可以使用注释块填充空白:

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

Answer 2

将<span>标记放在同一行上,它们之间没有任何空格.

Answer 3

看起来好像您的标题错误 - 您的h1标题导致文本和百分比框之间出现空格。要删除请尝试以下操作：

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

如果它实际上是您正在谈论的跨度，那么您需要删除它们之间的任何空白 - 请参阅其他答案