왜 `margin-top`은 `inline-block`과 작동하지만 CSS에서는 `inline`이 작동하지 않습니까?

불일치 발견: Margin-Top이 Inline-Block에서는 작동하지만 Inline에서는 작동하지 않는 이유

CSS 스타일링 영역에서 표시 속성 및 여백 동작은 때때로 난처한 시나리오로 이어질 수 있습니다. 그러한 예 중 하나는 inline-block에서는 작동하지만 인라인에서는 작동하지 않는 margin-top의 흥미로운 사례입니다.

다음 CSS 스니펫을 고려하세요.

h1 {
    display: inline;
    margin-top: 25px;
}

요소에서 이 선언은 상단 여백을 생성하지 못합니다. 하지만 표시 속성을 inline-block으로 변경하면 갑자기 margin-top이 적용됩니다.

이 수수께끼를 풀기 위해 CSS2 사양을 깊이 파고듭니다. 섹션 9.2.4에 따르면 인라인 블록 요소는 인라인 수준 블록 컨테이너를 생성하며 기본적으로 요소를 원자적 인라인 수준 상자로 처리합니다. 대조적으로, 인라인 요소는 섹션 9.2.4에 명시된 대로 하나 이상의 인라인 상자를 생성합니다.

결정적으로 CSS2 사양의 섹션 9.4.2에서는 인라인 요소가 세로 여백을 무시하고 가로 여백만 존중한다는 점을 명시합니다. 반면에 블록 수준 요소는 가로 및 세로 여백을 모두 존중합니다.

따라서 인라인과 인라인 블록 간의 불일치는 인라인 요소와 블록 요소의 동작이 다르기 때문에 발생합니다. 인라인과 같은 인라인 요소는 수평으로 하나씩 배치되기 때문에 수평 여백만 존중합니다. 반면에 인라인 블록 요소는 효과적으로 블록으로 처리되어 margin-top과 같은 수직 여백을 준수하는 기능을 포함하여 블록 수준 요소의 친숙한 동작을 나타냅니다.

위 내용은 왜 `margin-top`은 `inline-block`과 작동하지만 CSS에서는 `inline`이 작동하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!