CSS anchor inline-block misaligned

Question

I have this JSFiddle. Can someone explain, why is the anchor position misaligned relative to its siblings? I know I can correct it with position relative and negaitve top offset, but I don't understand, why it is like this in the first place.

HTML:

<div class="container">
    <div class="left"></div>
    <a href="">Some link</a>
    <div class="right"></div>
</div>

CSS:

.container {
    height: 25px;
    white-space: nowrap;
}

.container .left {
    border: 1px solid black;
    display: inline-block;
    margin: 0;
    height: 25px;
    width: 80px;
    padding: 0;
}

.container .right {
    border: 1px solid black;
    display: inline-block;
    margin: 0;
    height: 25px;
    width: 80px;
    padding: 0;
}

.container a {
    display: inline-block;
    border: 1px solid black;
    height: 25px;
    width: 300px;
    margin: 0;
}

Answer 1

You can add

vertical-align: top;

to .container a

This wil align the anchor with the divs.

Answer 2

The reason of this behaviour is due to the absence of text inside your .left and .right elements.

By default inline-block elements have vertical-align: baseline, but since you have empty elements there's no baseline, so they will be automatically aligned to the parent baseline (if you add some text inside them — even a   — you would istantly solve the problem)

In order to prevent this behaviour you could also set a common vertical-align to all .container children.