블록 및 인라인 요소에 대한 콘텐츠 상자의 높이는 어떻게 결정됩니까?

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

블록 요소의 높이 이해

블록 수준 요소에서 콘텐츠 상자의 높이는 콘텐츠 상자는 콘텐츠 상단에서 다음 중 하나까지의 거리로 정의됩니다(인라인 서식 지정 컨텍스트(IFC)의 존재 여부에 따라 다름) 또는 블록 서식 컨텍스트(BFC)):

1. IFC의 마지막 줄 상자 하단
2. BFC의 마지막 유입 하위 항목의 하단 여백

요소에 높이가 명시적으로 설정된 경우 콘텐츠 상자의 높이는 단순히 해당 값입니다.

인라인 요소 높이

인라인 요소의 경우 콘텐츠 상자의 높이는 명시적으로 정의되지 않으며 글꼴 크기 및 기타 글꼴 속성에 따라 달라집니다. 인라인 요소의 세로 여백, 테두리 및 패딩은 콘텐츠 상자의 상단과 하단에서 시작되지만 라인 상자의 높이에는 영향을 주지 않습니다.

예: 높이 결정

제공된 HTML 스니펫에서 콘텐츠 상자의 높이는 다음과 같습니다. 다음과 같습니다:

• 단락(

  ):

  높이는 한 줄로 IFC를 구성하므로 줄 높이(2em)와 같습니다.
• Div (
  ): line-height와 동일 (2em) 같은 이유로.
• 범위(): 높이는 줄 높이에 따라 달라집니다. 이는 높이는 줄 높이가 아닌 글꼴 속성에 의해 정의됨을 나타냅니다. 줄 높이.