title: Small Extra Linking Blocks Beside Anchor Blocks
body: <p>This is very strange. Here's the code:</p>
  
  <pre><code>nav {
    position:relative;
  }
  ul.navul {
    padding:0;
    margin:0;
    background-color:rgba(12,11,11,0.9);
  }
  .navul li {
    list-style-type:none;
    display:inline-block;
    border-left:1px solid white;
  }
  .navul li:first-child {
    border-left:none;
  }
  .navul a {
    display:inline-block;
    padding:10px;
    margin:0px;
    text-decoration:none;
    color:#fff;
    border:1px solid blue;
  }
  </code></pre>
  
  <p>Here is a snapshot of what I see:</p>
  
  <p>Little Blocks Of Link</p>
  
  <p><a href="https://i.stack.imgur.com/43Zbg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/43Zbg.png" alt="enter image description here"></a></p>
  
  <p>As I decrease the padding in 'a' tag, the size of the blocks go smaller and vice versa. I have already made list-style-type as "none". I have tried making padding:0 and margin:0 on 'li' tag but it doesn't seem to work. I really don't have a clue of what's going on.</p>
  
  <p>Can anyone help?</p>