CSS якорь встроенный блок неровный

Question

У меня есть JSFiddle. Может ли кто-нибудь объяснить, почему позиция якоря смещена относительно своих братьев и сестер? Я знаю, что могу исправить его с относительным положением и отрицательным верхним смещением, но я не понимаю, почему это так, в первую очередь.

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

Причина такого поведения объясняется отсутствием текста внутри ваших элементов .left и .right.

По умолчанию элементов инлайн-блоки имеет vertical-align: baseline, но так как у вас есть пустые элементы нет базовой линии, поэтому они будут автоматически выровнены по parent базовой линии (если добавить какой-то текст внутри них — даже   — вы бы istantly решить проблема)

Во избежание такого поведения вы также можете установить общий vertical-align всем детям .container.

Answer 2

Вы можете добавить

vertical-align: top; 

в .container a

Это согласует якорь с дивизиями.

Answer 3

При объявлении inline-block необходимо указать vertical-align.

Здесь вы идете.

WORKING DEMO

The CSS Изменить:

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

Answer 4

Вы можете использовать так много вариант

. Удалить Display:inline-block и добавить float:left

Здесь Demo

. Использование CSS vertical-align:top

Здесь demo