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

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元素之间的空格字符会创建一个新的文本块，该文本块显示为元素之间的空格。

删除元素之间的所有空格以消除它：

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

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

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

将样式与内容和语义分开通常要好得多。如果您需要更改布局等，它将使事情变得更容易。

Answer 5

这是HTML中span元素的一些奇怪行为。 如果第一个跨度的样式为text-decoration: underline;，那么也会在下划线处加上一个下划线。

我通过将span更改为div并将display: inline-block应用于div来解决了这个问题。

Answer 6

在你的css中尝试i{font-size:0}#output span{font-size:30px;}