Search code examples
cssinlinepaddingparent

Child border goes below parent one

I was looking at some examples of lists when noticed one example which I couldn't explain. This is website I was looking at http://css.maxdesign.com.au/listamatic/horizontal05.htm and this is code from it:

<div id="navcontainer">
    <ul id="navlist">
        <li id="active"><a href="#" id="current">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</div>

#navlist {
    padding: 3px 0;
    margin-left: 0;
    border-bottom: 1px solid #778;
    font: bold 12px Verdana, sans-serif;
}
#navlist li {
    list-style: none;
    margin: 0;
    display: inline;
}
#navlist li a {
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: #DDE;
    text-decoration: none;
}
#navlist li a:link {
    color: #448;
}
#navlist li a:visited {
    color: #667;
}
#navlist li a:hover {
    color: #000;
    background: #AAE;
    border-color: #227;
}
#navlist li a#current {
    background: white;
    border-bottom: 1px solid white;
}

What I don't get is the padding of parent #navlist element being set to 3px while still list items lay directly to its border like if it has padding of 0px. When I set following:

#navlist {
    padding: 0;
}

borders of list items go below the border of #navlist element. Why is that, shouldn't it then 1px above #navlist border? I cant find rule explaining this behavior?

Solution

  • The vertical padding works differently on inline elements. Consider this example:

    Padding Demo

    The cyan area represents parent element while the yellow area represents block/inline element with padding. Notice that the top and bottom padding of the inline element does not affect the height of the parent; it renders outside the parent if necessary.

    Now here is a breakdown of the Eric Meyer's tabbed navbar example:

    • There is a list with 3px vertical padding
    • This list contains a 14px tall line box which consists of inline list items
    • The list items contain links with 3px vertical padding (this padding makes the tab buttons appear wider, taller and nicer)

    As mentioned above, vertical padding does not move the line box down, instead, the padding draws outside the line box over the 3px padding that was added intentionally. The result is a pixel perfect tab menu.