div 요소에 텍스트가 포함되어 있으면 푸시됩니다. 인라인 블록의 독특한 동작

Question

자식이 텍스트를 포함 할 때 첫 번째 요소가 푸시 다운되는 이유는 무엇입니까? 왜 인라인 블록이 이런 식으로 행동 하는가?

div가 나란히있을 때 자녀를 가질 수 있도록 정렬하려면 어떻게해야합니까? 나는 아직도 이런 식으로 정렬 된 모든하면서 (상자 어린이를 포함하지 않는 경우 잘 작동), 요소 다른 상단에 하나의 목록을 가지고 회색 상자를 원하는 :

The example is here: http://jsfiddle.net/uwRwM/1/

.box { 
display: inline-block; 
} 

Answer 1

쉬운 수정. overflow:hidden을 추가하십시오.

이렇게하면 요소에 텍스트가 포함됩니다. 또한

Working jsFiddle demo

.box { 
    overflow:hidden; 
} 

, 당신은 vertical-align:top을 설정할 수 있습니다. inline-block 소자의 기본 수직 정렬 baseline 때문에

.box { 
    vertical-align:top; 
} 

Working jsFiddle demo

이 발생하는 이유이다. 따라서 그것이 바닥에 있었던 이유.