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

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

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

내용 없이 높이 측정

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

빠른 수정: 줄 높이 제거

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

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

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

간단한 설명

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

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