줄 높이는 HTML 콘텐츠 상자의 높이에 어떤 영향을 줍니까?

HTML 요소의 콘텐츠 상자 높이 이해

HTML에서 요소는 블록 요소 또는 인라인 요소로 분류될 수 있습니다. 콘텐츠 상자의 높이 또는 화면에서 차지하는 영역은 다양한 규칙에 따라 결정됩니다.

블록 요소

div 및 p의 높이는 주로 line-height 속성에 의해 결정됩니다. line-height가 2em과 같은 값으로 설정되면 콘텐츠 상자의 높이는 line-height 높이의 두 배가 됩니다.

이 동작은 다음과 같이 모든 블록 요소에서 일관됩니다. 다음 예:

<div>

인라인 요소

블록 요소와 달리 스팬과 같은 인라인 요소에는 높이 속성이 없습니다. 대신, 수직 치수는 글꼴 속성에서 파생됩니다. 사양에서는 UA가 인라인 요소 콘텐츠 상자의 높이를 결정하는 방법을 명시적으로 정의하지 않지만 일반적으로 글꼴의 전각 상자 또는 오름차순/내림차수 측정을 사용합니다.

즉, 줄을 설정할 수 있는 동안 인라인 요소의 높이는 높이에 직접적인 영향을 미치지 않습니다. 높이는 아래에 설명된 것처럼 사용된 글꼴과 글꼴 크기에 따라 달라집니다.

<span>

위 내용은 줄 높이는 HTML 콘텐츠 상자의 높이에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!