빈 인라인 블록 div가 숨겨진 컨테이너 내에서 높이를 얻는 이유는 무엇입니까?

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으로 처리되어야 합니다.

위 내용은 빈 인라인 블록 div가 숨겨진 컨테이너 내에서 높이를 얻는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!