블록 요소와 인라인 요소의 콘텐츠 상자 높이는 어떻게 다릅니까?

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

"콘텐츠 상자"의 개념은 콘텐츠 상자의 높이가 사각형 영역을 의미합니다. 텍스트와 요소의 내부 콘텐츠를 포함합니다. 바람직한 레이아웃을 얻으려면 높이를 결정하는 것이 중요합니다.

블록 요소

블록 요소의 경우 콘텐츠 상자의 높이는 두 가지 시나리오에 따라 달라집니다.

• 인라인 서식 컨텍스트(IFC): 요소가 IFC를 생성할 때 높이는 라인 상자에 의해 제어됩니다. Line-height는 각 라인 상자의 높이를 정의하며, 이는 콘텐츠 상자 높이를 집합적으로 결정합니다. 이는

  및

  줄 높이가 지정됩니다.
• BFC(블록 서식 컨텍스트): BFC에서 높이는 블록 하위 요소의 존재 여부, 해당 여백 및 잠재적인 여백 축소에 따라 달라집니다. 블록 하위 항목이 있는 경우 이를 포함하도록 높이가 확장됩니다. 블록 하위 요소가 없으면 높이는 0이 됩니다.

인라인 요소

블록 요소와 달리 인라인 요소는 동일한 규칙을 따르지 않습니다. 콘텐츠 상자 높이. 사양에서는 의도적으로 높이 결정을 사용자 에이전트(브라우저)에 맡깁니다. 콘텐츠 영역의 크기는 사용된 글꼴에 따라 결정됩니다.

사용자 에이전트는 높이를 유연하게 정의할 수 있지만 일반적으로 다음과 같은 요소를 고려합니다.

• Em -box Height: 콘텐츠 영역의 높이는 em-box를 기준으로 할 수 있으므로 줄 높이를 기준으로 일관된 배경 스타일을 보장합니다.
• 글리프 상승 및 하강: 또는 , 높이는 글꼴의 최대 오름차순 및 내림차순으로 정의될 수 있으며 em 상자 위 또는 아래로 확장되는 글리프를 수용합니다.

인라인 요소는 일반적으로 높이 속성을 따르지 않는다는 점에 유의하는 것이 중요합니다. . 명시적인 높이를 설정하려고 시도하면 콘텐츠 영역 크기에 영향을 미치지 않을 수 있습니다.

위 내용은 블록 요소와 인라인 요소의 콘텐츠 상자 높이는 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!