Geek Answers Handbook

The vertical indents of the horizontal menu on the anchor shortcut do not affect

I am wondering why in the following example, the top and bottom padding does not affect the anchor tag, while left and right?

<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 filling do not affect the list items, but on the left and right?

I tried this floating point option instead of displaying: built in to a list item, and it worked the way I expected. Therefore, I suppose that if I had a secondary question, then what is the difference between float: left; and display: built-in? I read the float spec and it looks like the float is still an online inline box, so does it look like an inline block?

, , , - , , .


+5
2

. .

, :

a
{
    display: block;
    float: left;
}

, , . , - . , , .

+11

CSS , display: block float: left.

- ... . : , .

, display li inline-block line-height position: relative .. , .

, ; .

:

  • IE6 display: inline-block display inline. HTML4 .
  • Firefox 2.x inline-block, -moz-inline-block CSS.
  • , , .
+3

More articles:


All Articles