`display: inline-block`이 숨겨진 Div 위에 간격을 만드는 이유는 무엇입니까?

Inline-Block이 숨겨진 Div에 높이를 추가하는 이유

디스플레이를 사용하는 경우:

요소를 포함하는 요소가 숨겨져 있으면 요소 위에 예기치 않은 간격이 발생할 수 있습니다. 이 동작은 display: block에서는 발생하지 않습니다.

왜 이런 일이 발생합니까?

display: inline-block은 줄 높이 계산을 변경합니다. 인라인 형식화 컨텍스트에서 인라인 블록 요소의 높이는 'line-height' 속성을 기반으로 합니다. 빈 인라인 블록 요소의 경우 눈에 보이는 콘텐츠가 없더라도 이는 기본 줄 높이로 변환됩니다.

간격 뒤의 추론

따라서 빈 inline-block은 일반적으로 에서 상속된 줄 높이를 기준으로 최소 줄 공간을 예약합니다. 요소. 이 예약된 공간은 컨테이너가 표시되지 않을 때 요소 위에 공백으로 나타납니다.

빠른 수정

이 공백을 없애기 위한 빠른 해결책은 인라인을 래핑하는 것입니다. -글꼴 크기: 0을 명시적으로 설정하는 래퍼의 블록 요소. 이렇게 하면 글꼴과 줄 높이가 없어 빈 인라인 블록의 높이가 없게 됩니다.

업데이트

빈 인라인 블록 요소의 높이는 공식 문서에 명시적으로 정의되어 있지 않습니다. 그러나 테스트에 따르면 다음과 같이 이해할 수 있습니다.

• 빈 공간: 인라인 블록 요소는 잠재적인 콘텐츠를 위한 라인 상자를 예약합니다.
• 상속된 줄 높이: 이 줄 상자는 element.
• 최소 줄 간격: 기술적으로 서식 지정 목적으로 존재하지 않는 빈 인라인 블록에도 불구하고 여전히 최소 줄 공간을 확보합니다.

위 내용은 `display: inline-block`이 숨겨진 Div 위에 간격을 만드는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

for using Property this display

성명：

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