컨테이너가 숨겨져 있을 때 빈 인라인 블록 요소의 높이가 높아지는 이유는 무엇입니까?

인라인 블록으로 인해 숨겨진 컨테이너로 빈 Div의 높이가 높아지는 이유는 무엇입니까?

비어 있는

display:inline-block이 할당되면 주변 컨테이너가 숨겨져 있음에도 불구하고 신기하게도 높이를 얻습니다. display:block을 사용하면 이 동작이 발생하지 않습니다.

인라인 블록 및 줄 높이

인라인 블록의 주요 측면 중 하나는 줄 높이 계산에 영향을 미친다는 것입니다. . 인라인 컨텍스트에서 요소는 아래쪽, 위쪽 또는 텍스트 기준선을 기준으로 정렬됩니다. 인라인 형식의 일부인 인라인 블록 요소는 블록 요소와 마찬가지로 여백 상자가 아닌 줄 높이를 기준으로 높이를 계산합니다.

빈 인라인 블록의 높이 문제

인라인 블록 요소가 비어 있으면 일반적으로 글꼴 특성을 기반으로 하는 상위 요소의 기본 줄 높이를 상속합니다. 인라인 블록에 콘텐츠가 없더라도 여전히 할당된 글꼴을 사용하여 줄 높이를 설정하려고 시도하여 높이가 0이 아닙니다.

빠른 수정: 줄 높이 재설정

이러한 높이 불일치를 해결하기 위해 래퍼를 사용하여 글꼴 크기: 0을 명시적으로 설정할 수 있습니다. 이렇게 하면 글꼴 관련 계산을 효과적으로 제거하고 줄 높이를 제거할 수 있습니다. 그 후 높이 문제를 유발하지 않고 콘텐츠를 허용하기 위해 인라인 블록 내에서 글꼴 크기를 복원할 수 있습니다.

업데이트: 인라인 블록 높이 결정

에도 불구하고 광범위한 문서화로 인해 빈 인라인 블록의 본질적인 높이는 여전히 수수께끼로 남아 있습니다. 그러나 관찰과 테스트를 통해 특정 패턴이 나타났습니다. 인라인 블록 요소는 부모의 상속된 줄 높이를 기반으로 최소 줄 공간을 예약하는 것 같습니다.

요약하면 인라인 블록은 특정 레이아웃에 이점을 제공하지만 빈 공간의 최소 높이 예약은 인라인 블록은 원치 않는 간격을 방지하기 위해 추가적인 고려가 필요할 수 있습니다.

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

for while require using this display margin issue

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.