title: CSS border-bottom getting space between elements
body: <p>I am working on a sidebar, where I have 'a' elements inside 'li's, applying CSS code on them, and giving them border. However when I apply border-bottom on the 'a' elements, space between the elements is also effected. How can I remove this space between them? Thanks.</p>
  
  <p>Sidebar image link: <a href="http://imgur.com/gntSanx" rel="nofollow">http://imgur.com/gntSanx</a></p>
  
  <p>Code [html] :</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;div class="sidebar"&gt;
              &lt;ul id="nav"&gt;
                  &lt;li&gt;&lt;a href="#" class="selected"&gt;Dashboard&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Booter Hub&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Stresser&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Friends&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Search&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Purchase&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
  </code></pre>
  
  <p>Code [CSS] :</p>
  
  <pre><code>ul#nav li a {
  color: #ccc;
  display: block;
  padding: 10px;
  font-size: 0.8em;
  border-bottom: 1px solid #0A0A0A;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s
  </code></pre>
  
  <p>}</p>