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

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

컨텍스트

빈

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

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

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

내용 없이 높이 측정

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

빠른 수정: 줄 높이 제거

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

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

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

간단한 설명

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

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

원천：php.cn

이전 기사：HTML에서 이미지 드래그를 비활성화하는 방법은 무엇입니까? 다음 기사：CSS가 텍스트 대소문자를 순차적으로 조작할 수 있나요?

본 웹사이트의 성명

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

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

2

1732

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

10

1889

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1601

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1512

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1549

관련 주제

더>

• HTML 저작권 기호
• 솔리드 스테이트 드라이브 데이터 복구
• 프라이빗 클라우드란 무엇입니까?
• setInterval을 중지하는 방법
• 파이썬 고차 함수 소개
• 파이썬이 할 수 있는 일
• fieldset 태그 사용법
• 어떤 그리기 소프트웨어가 있나요?