Question

I have made this centered navigation bar, and I wanted to add a :active state to the link by making it look like it’s pressed so I added a margin-top:2px on the a element.

<ul>
    <li>Previous</li>
    <li>1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li>...</li>
    <li><a href="#">Next</a></li>
</ul>

---

The problem is why are the other a elements also have a margin-top even if I only assigned it to the element that is currently being clicked?

---

ul {
    text-align:center;
}
li {
    color:#555+60;
    display:inline;
    font-size:18px;
    padding:0 4px;
}
li:first-child,li:last-child {
    border:1px solid #bbb;
}
a {
    display:inline-block;
    color:#555;
}
a:active {
    margin-top:2px;
}​

JSFiddle: http://jsfiddle.net/Pxmp3/

Answer 1

You’re not actually adding a margin to all a elements, rather this is the way inline-block elements behave given their line-height, vertical alignment etc.

You are rendering li elements inline. Picture a baseline going through them – now, when you end up pushing a child of one of the nodes down 2px it cannot disturb this baseline so it ends up pushing this baseline in a uniform manner, visually bringing down the rest of the buttons.

I’d suggest avoiding non-trivial usage of inline-block until you are comfortable with its rendering specifics – try, for instance, floating or using position:relative