라인 높이는 인라인 요소와 해당 상자의 높이에 어떤 영향을 줍니까?

인라인 요소의 줄 높이

인라인 요소의 줄 높이 메커니즘을 결정하는 것은 복잡할 수 있습니다. 다음은 미묘한 차이를 명확히 하기 위한 심층적인 설명입니다.

인라인 상자의 높이

인라인 요소는 줄 높이로 정의된 인라인 상자를 만듭니다.

The height of the inline box encloses all glyphs and their
half-leading on each side and is thus exactly 'line-height'.

따라서 인라인 요소의 line-height를 15px로 설정하면 해당 상자 높이가 15px.

라인 상자 높이

그러나 인라인 상자를 둘러싸는 라인 상자에도 정의된 높이가 있습니다.

The height of a line box is determined by the rules given in the
section on line height calculations.

인라인 상자의 경우 line-height와 수직 정렬이 같으면 라인 상자의 높이는 line-height와 같습니다. 따라서 이 경우 라인 박스 높이도 15px입니다.

인라인 박스의 콘텐츠 영역 높이

브라우저의 개발자 도구에서는 높이를 표시하는 경우가 많습니다. 인라인 상자 내의 콘텐츠 영역. 이 높이는 일반적으로 글꼴의 최대 오름차순 및 내림차순으로 결정됩니다.

The height of the content area should be based on the font, but this
specification does not specify how.

따라서 콘텐츠 영역 높이는 달라질 수 있으며 글꼴 크기가 설정된 경우에도 줄 높이보다 클 수 있습니다. line-height와 같은 값으로.

요약하면 인라인 요소와 관련된 다양한 높이 include:

• 인라인 상자 높이는 줄 높이로 결정됩니다.
• 줄 높이가 동일하고 수직 정렬이 있는 인라인 상자의 경우 줄 상자 높이는 줄 높이로 결정됩니다. .
• 콘텐츠 영역 높이는 글꼴의 최대 오름차순 및 내림차순에 따라 결정됩니다.

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