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?

回答1:

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.

回答2:

I think it's this: the <li> element and the contained <a> elements are both inline elements. Therefore they line up at the baseline of the <ul> container, which is inside the 16 pixels plus 3 pixels of padding below the top of the <ul>. (I think the baseline is probably 2 pixels up from the bottom but it's kind-of hard to tell exactly.) The <a> tag is also 16pixels high, and so they line up exactly over the 16 pixels in the <ul>. Thus the 3 pixels of top and bottom padding of the <a> line up exactly over the space available in the <ul>.

Basically it boils down to the way inline elements work. If you make the <a> elements be inline-block instead of inline you'll see that the padding no longer overlaps. You can read the W3C material about it here.

来源：https://stackoverflow.com/questions/25472856/child-border-goes-below-parent-one

标签

css

inline

padding

parent