title: List items with separation but without margin and padding
body: <p>I'm trying to cover the top of my site with list items.</p>
  
  <p>My list items are appearing like this:</p>
  
  <p><img src="https://i.stack.imgur.com/iS2Cp.png" alt="enter image description here"></p>
  
  <p>And i don't know why this separation between them. They don't have any margin and padding.</p>
  
  <p>Anyone knows why is this?</p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;ul class="listras-lista"&gt;
              &lt;li class="listras-lista_item"&gt;&lt;/li&gt;
              &lt;li class="listras-lista_item"&gt;&lt;/li&gt;
              &lt;li class="listras-lista_item"&gt;&lt;/li&gt;
              &lt;li class="listras-lista_item"&gt;&lt;/li&gt;
              &lt;li class="listras-lista_item"&gt;&lt;/li&gt;
              &lt;li class="listras-lista_item"&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.listras-lista {
    list-style: none;
    width: 100%;
  }
  .listras-lista_item {
    display: inline-block;
    background: #CC00CC;
    width: 20%;
    height: 5px;
    padding: 0;
  }
  </code></pre>