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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Stock Market GPT
더 현명한 결정을 위한 AI 기반 투자 연구
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
순수한 CSS로 드롭 다운 메뉴를 만드는 방법
Sep 20, 2025 am 02:19 AM
HTML 및 CSS를 사용하여 JavaScript없이 드롭 다운 메뉴를 만듭니다. 2. 호버 의사 클래스를 통해 하위 메뉴 디스플레이를 트리거합니다. 3. 중첩 된 목록을 사용하여 구조를 구축하고 CSS에 숨겨진 및 매달린 디스플레이 효과를 설정하십시오. 4. 시각적 경험을 향상시키기 위해 전환 애니메이션을 추가 할 수 있습니다.
CSS로 이미지가 스트레칭 또는 수축되는 것을 방지하는 방법
Sep 21, 2025 am 12:04 AM
사용 OBJECT-FITORMAX-WIDTHWITHHEIGHT : AutoTopRevEntImagedIsportion; 개체-피트 컨트롤 하위 링크 컨테이너 및 max width : 100%;
CSS에서 포인터 이벤트 속성을 사용하는 방법
Sep 17, 2025 am 07:30 AM
ThePointer-EventsPropertyIncsscontrolswheTheranElementCanBethetArgetOfPointerEvents.1.UsePointer-Events : nonetodisableInterActionSlikeClickSorHoverSwHileKepingTheElementSibleSible.2.AppLyItToOverLayStoClick-throughtounderlyELELENELENELENELEMEN
CSS와 함께 상자 그림자 효과를 추가하는 방법
Sep 20, 2025 am 12:23 AM
usethebox-shadowpropertytoadddropshadows.definehorizontalandverticaloffsets, 흐림, 스프레드, 색상 및 옵션 alinsetforinnershadows.multipleshadowsarecomma-separated.example : box-shadow : 5px10px8pxrgba (0,0,0,0.3);
CSS를 사용하여 이미지에 필터를 적용하는 방법
Sep 21, 2025 am 02:27 AM
thecssfilterpropertyallowseaseasyimagestylingwitheffects likeblur, brightness, andgrayscale.usefilter : 필터-기능 (value) onimagesorbackgroundimages.commonFunctionsIncludeBlur (px), 밝기 (%), Grayscale (%), 채도 (%) 및 hue-merate (degrotate)
CSS에 그라디언트 배경을 추가하는 방법
Sep 16, 2025 am 05:30 AM
CSS 그라디언트 배경을 추가하려면 배경 또는 배경 이미지 속성을 사용하여 Linear-Gradient (), Radial-Gradient ()와 같은 함수와 협력하십시오. 먼저 그라디언트 유형을 선택하고 방향과 색상을 설정하고 컬러 도킹 포인트, 모양, 크기 및 선형 그레이드 (Toright,#ff7e5f,#feb47b)와 같은 기타 매개 변수를 통해 미세하게 제어하여 왼쪽에서 오른쪽으로 선형 그라디언트를 생성하여 Radial-Gradient (원,#ff9a9e,#fecfef)를 생성하여 원형 구배를 만들어냅니다.
CSS를 사용하여 목록에 비틀 거리는 애니메이션 효과를 만드는 방법
Sep 18, 2025 am 12:15 AM
CSS를 사용하여 인터리브 된 애니메이션 효과를 만들려면 목록 항목에 대해 동일한 애니메이션을 설정하지만 시작 시간을 놀라게합니다. 먼저, 지정되지 않은 목록 HTML 구조를 구축 한 다음, 슬라이드로 페이드하는 @keyframes 애니메이션을 정의한 다음, nth-Child 선택기 또는 CSS 사용자 정의 속성을 통해 각 목록 항목에 대해 점진적인 애니메이션 델리를 설정하여 스 태거 효과를 달성하십시오. 마지막으로, JavaScript는 뷰포트에 들어갈 때 트리거링을 제어하는 데 선택적으로 사용될 수 있습니다. 이 방법은 요소 타이밍을 조정하여 자연스럽고 부드러운 계단식 애니메이션을 달성합니다.
CSS 그리드 레이아웃에서 간격을 만드는 방법은 무엇입니까?
Sep 22, 2025 am 05:15 AM
간격, 행 갭 또는 열 갭 속성을 사용하여 CSSGRID 레이아웃에서 그리드 항목간에 간격을 만듭니다. GAP는 한두 길이의 값을 수용 할 수있는 행 열격 간격을 설정하기위한 약어 속성입니다. 행 갭 및 열 갭은 행과 열 사이의 간격을 개별적으로 제어하고 PX, REM 및 %와 같은지지 장치를 제어합니다.
