DIV 인라인 블록 요소

Question

안에 다른 요소를 삽입 할 때 확인이 종류 제가

다음 코드

<div> 
    <p>hi</p> 
</div> 
<div></div> 
<div></div> 
<div></div> 

div { 
    width: 200px; 
    height:200px; 
    background: red; 
    display: inline-block; 
} 

라인 중 제 DIV 나누기가 이상한 인 휴식. 왜? 수직 정렬 또는 오버플로로 해결할 수 있다는 것을 알고 있습니다. 그러나 이것이 처음부터 왜 일어나고 있는가?

링크 : http://codepen.io/sergelerner/full/wKvsy

Answer 1

인라인 블록 요소의 기본 vertical-align은 baseline입니다.

상자의 기준선을 부모 상자의 기준선에 맞 춥니 다.

'인라인 블록'의 기준선은 플로 플로우 상자가 없거나 '오버플로'속성의 값이 ' visible '이며,이 경우 기준선은 아래쪽 여백 가장자리입니다.

<p> 태그를 추가하면 정렬 기준이됩니다.

div { 
vertical-align:middle; 
/*or*/ 
vertical-align:top; 
} 

http://codepen.io/anon/pen/bcnDB