라인 높이는 블록 및 인라인 요소의 높이에 어떤 영향을 줍니까?

<p>

블록 및 인라인 요소에 대한 콘텐츠 상자 높이 결정

블록 요소

<p>블록 요소의 경우 콘텐츠 상자 높이를 결정할 수 있습니다. 다음과 같은 방식으로 line-height 속성을 사용하여 결정됩니다.

• 모든 블록 수준 하위 요소, 패딩 또는 테두리에서 요소 높이는 줄 높이에 따라 결정됩니다.
• 블록 요소가 IFC(인라인 서식 지정 컨텍스트)를 설정하는 경우 높이는 마지막 요소에 의해 정의됩니다. line-height에 의해 설정된 line box.
• block 요소가 BFC(Block Formatting Context)를 설정하는 경우 높이는 마지막 유입 하위 항목의 높이에 의해 결정됩니다. (접힌 여백 포함) 또는 해당 하위 요소의 아래쪽 테두리 가장자리(상단 여백이 요소의 아래쪽 여백과 함께 축소되지 않는 경우).

인라인 요소

<p>인라인 요소의 경우 height 속성은 적용되지 않습니다. 대신 콘텐츠 영역의 높이는 사용된 글꼴 메트릭을 기반으로 하며 CSS 속성으로 명시적으로 제어할 수 없습니다. 콘텐츠 영역은 항상 줄 상자 안에 맞아야 하지만 정확한 높이는 글꼴 및 렌더링 엔진에 따라 다를 수 있습니다.

<p>차이점을 설명하려면 다음 코드 조각을 고려하세요.

<p>이 예에서 div 및 p 요소는 IFC를 설정하므로 라인 상자 높이가 라인 높이와 일치합니다. 그러나 인라인 범위 요소의 경우 콘텐츠 영역 높이는 글꼴 메트릭에 따라 결정되며 줄 높이와 다를 수 있습니다.

위 내용은 라인 높이는 블록 및 인라인 요소의 높이에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!