줄 높이 및 인라인 요소: 심층 분석

인라인 요소의 줄 높이 동작을 이해하는 것은 어려울 수 있습니다. 철저한 조사에도 불구하고 일부 주요 측면은 여전히 ​​불분명합니다. 이 가이드에서는 다음 질문에 답하기 위해 주제를 더 자세히 살펴봅니다.

1. 글꼴 크기와 측정된 높이의 불일치:

글꼴 크기가 15px인 인라인 요소는 브라우저 개발자 도구에서 높이 18px를 표시합니다. 이는 다음과 같은 이유로 발생합니다:

인라인 상자 높이:
• line-height 속성은 모든 글리프와 각 측면의 반행간을 포함하는 인라인 상자의 높이를 결정합니다. 이 경우 상자 높이는 15px입니다.
콘텐츠 영역 높이:
• 개발자 도구는 글리프 크기의 변화로 인해 일반적으로 줄 높이를 초과하는 콘텐츠 영역의 높이를 보고합니다. 글꼴 내에서.

인라인 요소의 배경색이 줄 높이와 일치하지 않는 이유:

줄 상자 높이:
• 인라인 박스 외에 라인 박스도 있습니다. 라인 상자의 높이는 라인 높이에 의해 결정되며 동일한 라인 높이와 수직 정렬을 공유하는 인라인 상자만 포함합니다. 이 예에서 라인 상자 높이도 15px입니다.
콘텐츠 영역 높이:
• 배경색은 사용된 텍스트에서 가장 높은 글리프의 높이에 해당하는 콘텐츠 영역에 적용됩니다. 글꼴과 크기. 이 값은 글꼴 특성에 따라 달라질 수 있으며 줄 높이와 직접적인 관련이 없습니다.

CSS 사양은 콘텐츠 영역을 계산하는 알고리즘을 명시적으로 정의하지 않습니다. 높이는 사용자 에이전트의 해석에 맡깁니다.