인라인 블록이 여백으로 작동하지 않습니다.

Question

왜이 두 요소가 인라인되지 않습니까?

나는 두 요소가

http://jsfiddle.net/3tcsn8z6/

<div class="label">Input label</div> 
<div class="input"> 
    <div></div> 
</div> 

.label, 
.input { 
    display:inline-block; 
} 

.label { 
    margin:2px 8px; 
    font-size:11px; 
} 

.input { 
    margin:10px 2px; 
} 

.input > div { 
    height:20px; 
    width:20px; 
    background:red; 
} 

Answer 1

당신은 vertical-align: middle를 추가 할 수 정렬 수직 될 것으로 기대한다. 기본값은 baseline입니다. 여백은 다소 부적합합니다.

Updated Example

.label, 
.input { 
    display: inline-block; 
    vertical-align: middle; 
}