Dlaczego blok śródliniowy wstawiany jest niżej, gdy zawiera treść?

Question

Jeśli masz trzy identyczne elementy div umieszczone w linii prostej, są one idealnie wyrównane. Ale jeśli umieścisz jakąś treść w jednym z elementów div, spadnie ona poniżej pozostałych. Dlaczego to robi?

<div class="left">?</div> 
<div class="center"></div> 
<div class="right"></div> 

div { 
    display:inline-block; 
    margin-:2px; 
    height:100px; 
    width:25px; 
    border:1px solid black; 
}​ 

http://jsfiddle.net/7kkC6/

lepszy przykład: http://jsfiddle.net/7kkC6/9/

Answer 1

To dlatego vertical-align jest domyślny zestaw do linii bazowej. można rozwiązać problemu, ustawiając ją do góry:

div { 
    display:inline-block; 
    margin-:2px; 
    height:100px; 
    width:25px; 
    border:1px solid black; 
    vertical-align: top; 
}​ 

Demo tutaj: http://jsfiddle.net/7kkC6/4/

Answer 2

To działa, jeśli zmienisz display do block i dodać float:left;

Working example.

Answer 3

Aby zrozumieć fakt można przeczytać Collapsing Margins Between Adjacent Elements i another on SO ale można go naprawić dodając float:left; i nadzieję, że już o tym wiedz.

Fixed Example.