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?

<ul id="nav">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
</ul>

    #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;
    }

Example: Link

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?

I did try this out 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 the float spec and it sounds like a float is still a box online inline so somewhat like inline-block?

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.

Thanks
Levi