inline-block을 사용하면 숨겨진 컨테이너 내의 빈 인라인 div 요소가 신기하게도 높이가 높아집니다. display:block의 동작과 달리 왜 이런 일이 발생합니까?
Display:inline-block은 요소에 특정 서식을 부여합니다.
inline-block 요소가 비어 있으면 글꼴이나 텍스트 내용이 없더라도 기본 줄 높이를 가정합니다. 이로 인해 비어 있는 상태에도 불구하고 요소의 높이가 작지만 눈에 띄게 높아집니다.
이 높이 문제를 방지하는 해결 방법은 글꼴 크기:0인 래퍼를 사용하여 줄 높이 계산을 제거하는 것입니다.
.wrapper { font-size: 0; } .wrapper div { font-size: medium; }
업데이트: 인라인 블록 높이 이해
초기 가정과 달리 빈 인라인 블록 요소의 정확한 높이는 공식적으로 문서화되지 않습니다. 그러나 관찰 및 테스트에 따르면 다음과 같습니다.
위 내용은 빈 인라인 블록 div가 숨겨진 컨테이너 내에서 높이를 얻는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!