"margin: 0" does not completely reset

Navigation
2

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

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

The problem is that there is still a gap between li 's, even when resetting margin: 0; , and when I wrap the edges of it to -2px, it is normal. I'd like to know what causes this. Below is the sample 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>
    
asked by anonymous 20.06.2017 / 09:07

1 answer

2

When you have elements with inline-block , the spaces between HTML create that spacing. Apparently you do not have spaces but a line break is considered a space. If you have HTML all 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, 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>
    
20.06.2017 / 09:16
List Folder Files with PHP doubts with sortable jquery