인라인 HTML 요소에서 Margin-Top이 무시되는 이유는 무엇입니까?

HTML5의 여백 - 인라인 요소에서 Margin-Top이 무시되는 이유

HTML5에서는 span과 같은 일부 요소가 인라인 요소로 분류됩니다. div 및 p와 같은 다른 요소는 블록 수준 요소입니다. 이러한 분류는 이러한 요소에 여백이 적용되는 방식에 영향을 미칩니다.

인라인 요소 이해

인라인 요소는 텍스트 줄 내에서 자연스럽게 흐르도록 설계되었습니다. 콘텐츠를 표시하는 데 필요한 최소한의 수직 공간을 차지합니다. 결과적으로 수직 여백이 적용되지 않습니다. span과 같은 인라인 요소에 margin-top을 적용하면 단순히 무시됩니다.

해결 방법: Inline-Block 또는 Block 표시

span과 같은 인라인 요소를 제공하려면 상단에 여백이 있으면 두 가지 옵션이 있습니다:

• 표시: inline-block: 이 설정을 사용하면 요소가 블록 요소처럼 동작하지만 여전히 텍스트 줄 내에서 흐를 수 있습니다. 가로 및 세로 여백을 모두 지원합니다.
• 디스플레이: 블록: 이 설정은 요소를 블록 수준 요소로 변환하여 사용 가능한 전체 세로 및 가로 공간을 차지할 수 있도록 합니다. 그러나 새 줄에 요소를 렌더링합니다.

예

다음 HTML 및 CSS 코드를 고려하세요.

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