inline-block을 사용하면 숨겨진 컨테이너 내의 빈 인라인 div 요소가 신기하게도 높이가 높아집니다. display:block의 동작과 달리 왜 이런 일이 발생합니까?

Display:inline-block은 요소에 특정 형식을 부여합니다.

• 인라인 수준 형식: 요소가 배치됩니다. 컨테이너 블록 내에서 수평으로 출력됩니다.
• 줄 높이 계산: 줄 높이는 인라인 요소에 대해 다르게 계산됩니다. 인라인 블록 요소의 경우 여백 상자의 높이가 됩니다. 일반 인라인 요소의 경우 'line-height' 속성입니다.

inline-block 요소가 비어 있으면 글꼴이나 텍스트 내용이 없더라도 기본 줄 높이를 가정합니다. 이로 인해 비어 있는 상태에도 불구하고 요소의 높이가 작지만 눈에 띄게 증가합니다.

이 높이 문제를 방지하는 해결 방법은 글꼴 크기:0인 래퍼를 사용하여 줄 높이 계산을 제거하는 것입니다.

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

업데이트: 인라인 블록 높이 이해

초기 가정과 달리 빈 인라인 블록 요소의 정확한 높이는 공식적으로 문서화되지 않았습니다. 그러나 관찰 및 테스트에 따르면 다음과 같습니다.

• Inline-block은 일반적으로 요소에 의해 결정되는 상속된 줄 높이를 기반으로 최소 줄 공간을 예약합니다.
• 이 줄 인라인 블록이 비어 있어도 공간이 지속되며 CSS 사양에 따라 이론적으로 높이가 0으로 처리되어야 합니다.