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

Margin-Top이 Span 요소에서 작동하지 않습니까?

span 요소에 margin-top 스타일을 추가할 때 다음과 같은 상황이 발생할 수 있습니다. 여백이 무시되는 것처럼 보입니다. 이 동작을 이해하기 위해 CSS의 인라인 요소와 블록 수준 요소 간의 근본적인 차이점을 살펴보겠습니다.

모든 측면에서 여백을 허용할 수 있는 블록 수준 요소인 div 및 p 요소와는 달리, 요소는 인라인 요소로 분류됩니다. 단어와 같은 인라인 요소에는 본질적으로 세로 방향의 여백이나 패딩이 없습니다. 이는 텍스트 콘텐츠에서 가로로 흐르도록 의도되었기 때문입니다.

CSS 사양에 따르면 "세로 여백은 대체되지 않은 인라인 요소에 아무런 영향을 미치지 않습니다." 따라서 margin-top 또는 margin-bottom을 범위 요소에 적용해도 시각적인 영향은 없습니다.

범위 요소에 여백을 제공하려면 표시 스타일을 조작하면 됩니다. 표시 속성을 "inline-block" 또는 "block"으로 설정하면 인라인 요소를 블록형 요소로 효과적으로 변환할 수 있습니다. 이 변환을 통해 수직 여백을 허용하고 다른 블록 수준 요소와 유사하게 동작할 수 있습니다.

다음은 인라인 블록 스타일을 적용하는 수정된 CSS 코드 버전입니다. first_title 범위:

 디스플레이: inline-block;<br> margin-top: 20px;<br> 여백 왼쪽: 12px;<br> 글꼴 두께: 굵게;<br> 글꼴 크기: 24px;<br> 색상: #221461;<br>}<br>

이 변경으로 인해 스팬 요소는 블록과 같은 요소로 표시됩니다. 주변 텍스트와 함께 흐르는 기능과 같은 인라인 속성을 유지하면서. 이제 margin-top 속성이 적용되고 요소는 위에서 20px 여백을 갖게 됩니다.

"display: block"을 사용하면 범위 요소가 변환됩니다. 전체 너비 블록으로 변환하는 것이 항상 바람직하지는 않습니다. 따라서 요소에 걸쳐 수직 여백을 제공하는 데는 일반적으로 "display: inline-block"이 더 나은 선택입니다.

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