giannisf giannisf - 1 month ago 7
CSS Question

Getting space between divs, no margin, padding

I am creating a component and I am getting empty space between divs. Any explanation?



.indicator {
width: 200px;
height: 30px;
box-shadow: 0 0 10px 3px;
position: absolute;
font-size: 10px;
}
.indicator div {
margin: 0;
padding: 0;
}
.na {
background: #aaa;
width: 33.33%;
height: 100%;
display: inline-block;
}
.med {
background: orange;
width: 33.33%;
height: 100%;
display: inline-block;
}
.hard {
background: red;
width: 33.33%;
height: 100%;
display: inline-block;
}
.level {
height: 60%;
width: 10px;
border: 1px solid black;
border-top: none;
position: absolute;
background: tomato;
top: 0;
left: 45%;
}

<div class="indicator">
<div class="level">

</div>
<div class="na">
NA
</div>
<div class="med">MED</div>
<div class="hard">EASY</div>
</div>




Answer

Actually, you have a space between your divs, just remove them.

.indicator {
  width: 200px;
  height: 30px;
  box-shadow: 0 0 10px 3px;
  position: absolute;
  font-size: 10px;
}
.indicator div {
  margin: 0;
  padding: 0;
}
.na {
  background: #aaa;
  width: 33.33%;
  height: 100%;
  display: inline-block;
}
.med {
  background: orange;
  width: 33.33%;
  height: 100%;
  display: inline-block;
}
.hard {
  background: red;
  width: 33.33%;
  height: 100%;
  display: inline-block;
}
.level {
  height: 60%;
  width: 10px;
  border: 1px solid black;
  border-top: none;
  position: absolute;
  background: tomato;
  top: 0;
  left: 45%;
}
<div class="indicator">
  <div class="level">

  </div>
  <div class="na">
    NA
  </div><div class="med">MED</div><div class="hard">EASY</div>
</div>