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

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>

Answer 1

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

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

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

或者，您可以用注释 block 填充空格:

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