title: Horizontal menu vertical padding on anchor tag doesn't take affect
body: <p>I am wondering why in the following example the top and bottom padding has no affect on the anchor tag while the left and right does?</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
      #nav{
          list-style:none;
      }
      #nav li{
          border:1px solid #666;
          display:inline;
         /*If you do it this way you need to set the top and bottom 
           padding to be the same here as under #nav li a
          padding:8px 0; */
      }
      #nav li a{
          padding:8px 16px;
      }
  </code></pre>
  
  <p>Example: <a href="http://www.levijackson.net/test/HorizontalMenu/horizMenu.html" rel="noreferrer">Link</a></p>
  
  <p>So my main question is, why does the top and bottom padding not have an effect on the list items while the left and right do?</p>
  
  <p>I did try <a href="http://www.levijackson.net/test/HorizontalMenu/horizMenu2.html" rel="noreferrer">this out</a> with a float instead of a display:inline on the list item and it worked as I expected it to.  So I guess if I had a secondary question it would be what is the difference between a float:left; and a display:inline? I was reading <a href="http://www.w3.org/TR/CSS2/visuren.html#floats" rel="noreferrer">the float spec</a> and it sounds like a float is still a box online inline so somewhat like inline-block?</p>
  
  <p>I appreciate any input, this isn't really something I need to know to finish a project or anything, but I would like to know why.</p>
  
  <p>Thanks<br>
  Levi</p>