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
