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

인라인 요소에 대해 여백 상단이 작동하지 않음: 인라인 동작 이해

HTML에서

와 같은 블록 수준 요소와 달리 인라인 요소로 간주됩니다. 또는

. 블록 수준 요소는 모든 측면에서 여백을 허용할 수 있지만 인라인 요소는 가로 여백만 허용합니다.

CSS 여백 속성은 요소 주변의 여백 영역 너비를 설정합니다. 블록 수준 요소에 적용하면 여백이 네 면 모두에 영향을 미칩니다. 그러나 과 같은 인라인 요소의 경우 세로 여백은 효과가 없습니다.

CSS 사양에 따르면 "세로 여백은 대체되지 않은 인라인 요소에 아무런 영향을 미치지 않습니다."

해결책:

다음과 같은 인라인 요소에 세로 여백을 허용하려면 , 표시 속성을 "inline-block" 또는 "block"으로 수정합니다.

Inline-Block:

• 요소가 다음을 수행하도록 허용합니다. 인라인으로 동작하지만 수직 여백도 활성화합니다.
• 예:

블록:

• 요소를 블록 수준 요소로 변환하여 세로 및 가로 여백을 허용합니다.
• 예 :

인라인 요소에는 display: inline-block을 사용하는 것이 좋습니다. 수직 여백이 필요한 디스플레이: 블록으로 인해 요소가 별도의 줄에 표시될 수 있습니다.

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