빈 인라인 블록 요소가 간격을 만드는 이유는 무엇입니까?

인라인 블록 높이 수수께끼: 줄 높이 효과 이해

컨텍스트

빈

요소에 인라인 블록 디스플레이가 제공되면 상위 컨테이너 내에서 예상치 못한 높이를 얻는 것 같습니다. 이 현상은 display:block에서는 발생하지 않습니다. 이러한 특성으로 인해 개발자들은 "인라인 블록이 왜 이러한 간격을 발생시키는가?"라고 궁금해하게 되었습니다.

라인 높이 계산 및 인라인 블록 효과

디스플레이의 중요한 측면 중 하나:inline-block은 줄 높이 계산에 영향을 미칩니다. 인라인 컨텍스트에서 줄 높이는 텍스트 기준선을 중심으로 이루어집니다. 인라인 블록 요소의 경우 줄 높이는 글꼴의 측정항목에 따라 결정됩니다.

내용 없이 높이 측정

빈 인라인 블록 요소에는 글꼴 관련 크기가 부족하기 때문에 문제가 발생합니다. 그러나 여전히 상위 요소의 기본 줄 높이를 상속하므로 눈에 띄는 간격이 발생합니다.

빠른 수정: 줄 높이 제거

이 문제를 해결하려면 래퍼 요소를 다음과 같이 할 수 있습니다. 글꼴 크기가 0으로 도입되어 줄 높이를 효과적으로 제거하여 간격을 제거합니다. 인라인 블록 요소 내에서 글꼴 크기를 재설정하면 원하지 않는 공간을 만들지 않고 콘텐츠를 허용할 수 있습니다.

업데이트: 문서의 공백 채우기

광범위한 연구에도 불구하고 높이를 명시적으로 정의하는 공식 문서는 없습니다. 빈 인라인 블록 요소.

간단한 설명

인라인 블록 요소는 마치 콘텐츠를 기대하는 것처럼 동작합니다. 실제 내용이 없더라도 상속된 줄 높이를 기준으로 최소 줄 공간을 예약합니다. 이 동작은 명시적으로 문서화되지는 않았지만 실험을 통해 관찰된 일반적인 패턴입니다.

위 내용은 빈 인라인 블록 요소가 간격을 만드는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

if for while default this display issue

성명：

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