Search code examples
htmlcssmarginpaddingspacing

What is making this spacing?

I've tried setting padding/margin to 0 for the spans and divs. Also, when using the inspector, it doesn't say there is any padding/margin on any element that is causing the spacing. I have also added a picture below showing the problem I am encountering, essentially looking to get rid of the spacing between the red boxes.

enter image description here

Code: 

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>

Solution

  • You have a - after your #sum DIV:

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

    MAke it:

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