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.