"margin: 0" does not Zera fully

Question

I have a problem and, although "half solved" (gambiarra), I would like to know what causes it.

I have a ul with white-space: nowrap; and the li's her in display: inline-block;

The problem is that there is still a spacing between the li's, even having the reset of margin: 0;, and when I select their margins to -2px, it is normal. I would like to know what causes it. Below is the example code

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}

.teste {
      margin: 20px auto;
      white-space: nowrap;
      list-style: none;
      width: 150px;
      height: 90px;
      background: blue;
}

.teste>* {
      width: 100%;
      height: 90px;
      background: green;
      display: inline-block;
      text-align: center;
      color: white;
}

/* AQUI, QUANDO EU SETO margin: -2px;  AS LI's SE JUNTAM */

.dois>* {
       margin: -2px;
}

 <ul class="teste" >
    <li> Li 1 </li>
    <li> Li 2 </li>
    <li> Li 3 </li>
 </ul>
 
  <ul class="teste dois" >
    <li> Li 1 </li>
    <li> Li 2 </li>
    <li> Li 3 </li>
 </ul>

Answer 1

When you have elements with inline-block the spaces between the HTML create this gap. Apparently you don’t have spaces but a line break is considered a space. If you have all the HTML on the same line, or at least there is no space/line break between closing a tag and opening the next one, then it will work.

Another solution is how you did it, using margin negative.

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}

.teste {
      margin: 20px auto;
      white-space: nowrap;
      list-style: none;
      width: 150px;
      height: 90px;
      background: blue;
}

.teste>* {
      width: 100%;
      height: 90px;
      background: green;
      display: inline-block;
      text-align: center;
      color: white;
}

<ul class="teste" >
    <li> Li 1 </li><li> Li 2 </li><li> Li 3 </li>
 </ul>
 
  <ul class="teste dois" >
    <li> Li 1 </li><li> Li 2 </li><li> Li 3 </li>
 </ul>