title: Why is the li taller than the a child tags
body: <p>I don't know why the li tags are 1px taller than the a tags the code is as following
  the fiddle <a href="http://jsfiddle.net/9Wy8z/" rel="nofollow">http://jsfiddle.net/9Wy8z/</a></p>
  
  <pre><code>#nav {
  width: 100%;
  background-color: #5A9AFF;
  }
  
  #nav &gt; #nav_container &gt; ul{
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  #nav &gt; #nav_container &gt; ul &gt; li {
      display: inline-block;
      padding: 10px 0;
  }
  
  #nav &gt; #nav_container &gt; ul &gt; li &gt; a {
      padding: 10px;
      text-decoration: none;
      color: #1b1b1b;
  }
  
  #nav &gt; #nav_container &gt; ul &gt; li &gt; a:hover {
      background-color: #e0e0e0;
  }
  
  
  &lt;div id="nav"&gt;
          &lt;div id="nav_container"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>this leads the a tags to be 38px and the li 39px and i am unsure why this is?</p>