是什么造成了这个间距？

Question

我尝试将 span 和 div 的 padding/margin 设置为 0。此外，在使用检查器时，它并没有说任何导致间距的元素上有任何填充/边距。我还在下面添加了一张图片，显示了我遇到的问题，基本上是为了摆脱红色框之间的间距。

代码：

body {
  margin: 0;
  padding: 0;
  background-color: rgb(167, 173, 240)
}

h1 {
  text-align: center;
  color: rgb(85, 86, 87);
  font-size: 50px;
}

#sum {
  margin: 0 auto;
  width: 30%;
  padding-top: 20px;
  height: 190px;
  text-align: center;
  font-size: 9.5em;
  color: pink;
  background-color: rgb(227, 86, 65);
}

.numbers {
  width: 75%;
  margin: 0 auto;
  height: 100px;
  text-align: center;
}

.numbers span {
  float: left;
  font-size: 2.5em;
  width: 16.6%;
  padding-top: 27.5px;
  height: 72.5px;
  color: pink;
  background-color: rgb(227, 86, 65);
}

div,
span {
  padding: 0;
  margin: 0;
}

<div id="sum">0</div>-

<div class="numbers">
  <span id="firstNum">0</span>
  <span id="secondNum">0</span>
  <span id="thirdNum">0</span>
  <span id="fourthNum">0</span>
  <span id="fifthNum">0</span>
  <span id="sixthNum">0</span>
</div>

Answer 1

你的#sum DIV 后面有一个-：

<div id="sum">0</div>-

成功：

<div id="sum">0</div>

body {
  margin: 0;
  padding: 0;
  background-color: rgb(167, 173, 240)
}

h1 {
  text-align: center;
  color: rgb(85, 86, 87);
  font-size: 50px;
}

#sum {
  margin: 0 auto;
  width: 30%;
  padding-top: 20px;
  height: 190px;
  text-align: center;
  font-size: 9.5em;
  color: pink;
  background-color: rgb(227, 86, 65);
}

.numbers {
  width: 75%;
  margin: 0 auto;
  height: 100px;
  text-align: center;
}

.numbers span {
  float: left;
  font-size: 2.5em;
  width: 16.6%;
  padding-top: 27.5px;
  height: 72.5px;
  color: pink;
  background-color: rgb(227, 86, 65);
}

div,
span {
  padding: 0;
  margin: 0;
}

<div id="sum">0</div>

<div class="numbers">
  <span id="firstNum">0</span>
  <span id="secondNum">0</span>
  <span id="thirdNum">0</span>
  <span id="fourthNum">0</span>
  <span id="fifthNum">0</span>
  <span id="sixthNum">0</span>
</div>