CSS inline block offset

Question

I have a JSFiddle . Can someone explain why the position of the anchor is biased relative to their brothers and sisters? I know that I can correct it with a relative position and a negative upper bias, but I do not understand why this is so 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

The reason for this behavior is due to the lack of text inside your elements .leftand .right.

vertical-align: baseline, , , parent ( - , a   — )

, vertical-align .container .

Answer 2

vertical-align: top;

to .container a

div.

Answer 3

vertical-align, inline-block.

.

CSS:

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

Answer 4

1. Display:inline-block float:left

2. css vertical-align:top