인라인 요소에서는 Margin-Top이 작동하지 않지만 인라인 블록 요소에서는 작동하는 이유는 무엇입니까?

인라인 대 인라인 블록: Margin-Top이 Inline-Block에서만 작동하는 이유

질문

HTML과 CSS를 사용할 때 사용자가

요소이지만 CSS 속성 표시가 inline-block으로 설정된 경우에만 표시되고 인라인으로 설정된 경우에는 표시되지 않습니다.

설명

CSS 사양은 inline과 inline-block의 차이점을 정의합니다.

• inline-block: 인라인 레벨 블록 컨테이너를 생성합니다. 여기서 요소의 내부 콘텐츠는 블록 상자로 형식화되고 요소 자체는 인라인 레벨 상자로 형식화됩니다.
• inline: 하나 이상의 인라인 상자를 생성합니다.

결정적으로 CSS2 사양에는 인라인 요소가 가로 여백만 존중한다고 명시되어 있습니다(예: margin-left).

구별

차이점은 인라인 및 인라인 블록 요소가 처리되는 방식에 있습니다.

• 인라인 동안 요소는 실제 인라인 요소로 간주되며, 인라인 블록 요소는 블록으로 처리되지만 시각적으로 블록과 인라인입니다.
• 인라인 블록과 같은 블록 수준 요소는 가로 및 세로 여백을 모두 존중하는 반면, 인라인 요소는 가로 여백만 존중합니다.

해상도

따라서 , 제공된 경우

에서 디스플레이를 인라인으로 설정합니다. 요소는 margin-top을 포함하지 않는 수평 여백만 적용합니다. 그러나 표시를 인라인 블록으로 설정하면 margin-top을 포함하여 가로 및 세로 여백을 모두 적용할 수 있습니다.

위 내용은 인라인 요소에서는 Margin-Top이 작동하지 않지만 인라인 블록 요소에서는 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!