Horizontal menu vertical padding on anchor tag doesn't take affect

Question

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

Answer 1

Anchors are inline elements. Only block level elements can have top/bottom attributes changed.

You can override by doing:

a
{
    display: block;
    float: left;
}

The float is neccessary because block level elements take up the entire width of the container they're in. You'll have to write some extra rules to clear it at some point. Either way, have a play about to see how it works.

Answer 2

An obscure corner of the CSS spec actually points out that display: block is an unnecessary companion to float: left.

The reason for the pointless padding is... inline elements. Interesting fact: inline elements will take padding values, but that padding won't affect the layout of surrounding content.

To get the desired results given the markup and styles above, I would suggest simply changing the display value of the li elements to inline-block and using a line-height value or position: relative etc. to control the vertical composition of the links while confining all of your box values to the list items.

The older the browser, the buggier these styles will be; details on that could go on for several paragraphs.

There are three support issues to remember when working with solutions like these:

1. In IE6 display: inline-block is only applied to elements that have a runtime display value of inline. The HTML4 spec can help you tell the sheep from the goats on that one.
2. Firefox 2.x doesn't support the inline-block value, but does have a -moz-inline-block CSS extension.
3. Interstitial source whitespace is rendered between inline-block elements as it is between inline elements, which might bring undesirable results in the absence of careful source markup formatting.