인라인 블록 div가 있고 텍스트가없는 경우에는 수직으로 정렬되지 않습니다.

Question

나는 두 개의 div을 나란히 가지고 있습니다. 둘 다 크기가 같고 display: inline-block입니다. 이 둘의 유일한 차이점은 첫 번째 텍스트가 일부 텍스트이고 두 번째 텍스트가 비어 있다는 것입니다.

HTML :

<div>1</div> 
<div></div> 

CSS :

div { 
    display: inline-block; 
    border: 1px solid black; 
    width: 50px; 
    height: 50px; 
} 

첫 번째 DIV가 두 번째보다 낮습니다.

두 번째 div에 일부 텍스트 나  을 추가하는 등 모든 가능한 수정 사항을 알고 있습니다. 물론 vertical-align: top을 추가하면이 문제도 수정됩니다.

내가 알고 싶은 것은 누군가가 설명 할 수있는 이유는 무엇입니까? 빈 div에는 div와 텍스트가 다른 div가있는 이유는 무엇입니까?

JSFiddle

Answer 1

인라인 블록 상자는 기본적으로 수직 인라인 블록 상자의 기준선이 렌더링되는 광고 박스의 기준선에 정렬되도록 정렬된다.

한 줄의 텍스트가있는 인라인 블록 상자의 기준선이 해당 줄의 기준선입니다. 보다 일반적으로 인라인 블록의 기준선은 포함 된 텍스트의 마지막 줄의 기준선입니다. 그러나 이는 텍스트가없는 인라인 블록에 대한 기준선이 없다는 것을 의미합니다.

그런 상황에서는 폴백 규칙이 시작되고 인라인 블록 상자의 맨 아래가 해당 줄 상자의 기준선에 배치됩니다.