상위 요소와 해당 하위 요소의 높이가 동일한 경우에도 왜 상위 요소에 수직 스크롤 막대가 있습니까?

하위 요소와 상위 요소의 높이가 동일함에도 불구하고 세로 스크롤 막대 처리

HTML에서 CSS를 사용하여 상위 요소와 하위 요소가 있는 중첩 요소의 스타일을 지정할 때 높이가 같으면 상위 요소에 세로 스크롤 막대가 나타날 수 있습니다. 스크롤바가 필요하지 않은 것 같아서 혼란스러울 수 있습니다.

원인: 수직 정렬 기준선

이 문제의 근본 원인은 기본값에 있습니다. 인라인 블록(예: 디스플레이가 포함된 div: inline-block)을 포함한 인라인 수준 요소의 CSS 속성: 수직 정렬: 기준선. 타이포그래피에서 "j" 및 "g"와 같은 문자는 기준선 아래로 확장됩니다. 이 기준선 간격은 상위 요소 내에 추가 높이를 생성합니다.

문제 해결

예기치 않은 수직 스크롤 막대를 제거하려면 다음을 사용하여 하위 요소의 수직 정렬을 조정할 수 있습니다. 수직 정렬 속성. 기본 기준선 대신 상단, 하단 또는 중간으로 설정하면 추가 간격이 제거되고 스크롤 막대가 표시되지 않습니다.

.sideBar, .contentHolder {
  vertical-align: top; // or 'bottom', 'middle'
}

대안

수직 정렬 조정 외에도 이 문제를 해결할 수 있는 다른 옵션이 있습니다:

• 대신 디스플레이: 블록 사용 표시: 하위 요소에 대한 인라인 블록
• 상위 요소에 line-height: 0을 설정합니다.
• 상위 요소에 글꼴 크기: 0을 설정합니다(다음에서 재정의할 수 있습니다). 필요한 경우 하위 요소).

위 내용은 상위 요소와 해당 하위 요소의 높이가 동일한 경우에도 왜 상위 요소에 수직 스크롤 막대가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!