빈 인라인 블록 Div에 높이가 있는 이유는 무엇입니까?

Inline-Block이 빈 Div의 높이를 설정하는 이유

빈 div 요소에 표시 속성 "inline-block"이 할당되면, 예기치 않게 높이가 증가하는 현상이 나타납니다. 이는 "display:block"에서는 발생하지 않는 현상입니다. 이렇게 역설적으로 보이는 동작은 인라인 블록 형식의 고유한 특성에서 비롯됩니다.

인라인 블록의 줄 높이 계산

요소를 인라인 블록으로 설정하면, 줄 높이 계산이 변환됩니다. 인라인 블록은 내부 텍스트의 기준을 정렬하는 대신 아래쪽, 위쪽 또는 둘 다를 정렬합니다.

빈 인라인 블록의 줄 높이

빈 인라인 블록 요소의 경우 , 줄 높이 계산은 요소와 관련된 글꼴 메트릭에서 파생됩니다. 그러나 텍스트 콘텐츠가 없기 때문에 요소는 상위 요소(일반적으로 본문)에서 상속받은 글꼴 크기에 따라 기본 줄 높이를 가정하게 됩니다.

빈 인라인 수정- 블록 높이

상속된 줄 높이로 인해 발생하는 원치 않는 높이를 제거하려면 글꼴 크기를 명시적으로 0으로 설정하는 래퍼 요소를 사용하여 모든 줄 높이 계산을 효과적으로 무효화할 수 있습니다.

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
}

업데이트: 빈 인라인 블록의 높이

빈 인라인 블록 요소의 높이에 대한 공식 문서가 없다는 점에 유의하는 것이 중요합니다. 그러나 관찰 결과 패턴이 드러납니다.

최소 줄 간격 예약

인라인 블록 요소는 내용에 관계없이 최소 줄 공간을 예약하는 것으로 보입니다. 이 공백은 상위 요소에서 상속된 줄 높이를 기반으로 합니다.

의미

이 동작은 inline-block이 본질적으로 콘텐츠를 예상하고 기본 줄 공간을 예약한다는 것을 의미합니다. 비어 있더라도 말이죠. 이는 높이가 0인 빈 줄 상자에 대한 W3 사양과 모순되지만 인라인 블록 형식과 관련된 특이한 점입니다.

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