如何删除两个跨度元素之间的多余空间？

Question

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

如何解决？我怎样才能删除那个额外的空间？

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

 <div id="output">
  <i>
    <span id="grade">Your grade :</span>
    <span id="total">524</span>
    <span id="max">/725</span>
    <center><h1><span id="percentage">72.28%</span></h1></center>
  </i>
</div>

原文由 Nikhil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看起来您的标题有误 - 您的 h1 是导致文本和百分比框之间出现空格的原因。要删除试试这个：

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

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

原文由 Pete 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

删除元素之间的所有空白以摆脱它：

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

或者，您可以用注释块填充空格：

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

原文由 jsalonen 发布，翻译遵循 CC BY-SA 3.0 许可协议