这是什么间距？

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

您的- DIV之后有一个#sum：

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