스팬 요소에 대해 마진탑이 작동하지 않습니까?

스팬 요소에 대해 마진탑이 작동하지 않습니까?

누가 제가 뭘 잘못 코딩했는지 알려주실 수 있나요?모든 것이 작동하고 있습니다. 단, 상단에 여백이 없다는 것입니다.

HTML:

<div id="contact_us"> <!-- BEGIN CONTACT US -->
  <span class="first_title">Contact</span>
  <span class="second_title">Us</span>
  <p class="content">For any questions whatsoever please contact us through the following e-mail address:</p></br></br>
  <p class="e-mail">info@e-mail.com</p></br></br></br></br>
  <p class="read_more"><a href="underconstruction.html">Read More</a></p>
</div> <!-- END CONTACT US -->

CSS:

span.first_title {
  margin-top: 20px;
  margin-left: 12px;
  font-weight: bold;
  font-size: 24px;
  color: #221461;
}

span.second_title {
  margin-top: 20px;
  font-weight: bold;
  font-size: 24px;
  color: #b8b2d4;
}   

와는 달리div,p ¹ 블록 레벨 요소로 사용할 수 있습니다.margin사방에,span² 가로로만 여백을 차지하는 인라인 요소이므로 할 수 없습니다.

사양에서:

여백 속성은 상자의 여백 영역의 너비를 지정합니다.'마진' 속기 속성은 네 변 모두에 대한 마진을 설정하는 반면, 다른 마진 속성은 각각의 변만 설정합니다.이러한 특성은 모든 요소에 적용되지만 수직 여백은 대체되지 않은 인라인 요소에는 영향을 주지 않습니다.

데모 1(수직)margin로서 적용되지 않는span이다.inline요소)

해결책?당신의 것을 만드세요.span요소,display: inline-block;또는display: block;.

데모 2

를 사용하는 것이 좋습니다.display: inline-block;그대로inline게다가block만들기block요소가 다른 선에 렌더링되도록 할 뿐입니다.block레벨 요소들이 취하는.100%페이지의 수평 공간(만들지 않는 한)inline-block아니면 그들은floated로.left또는right.

---

^{블록 레벨 요소 - MDN 소스}

^{인라인 요소 - MDN 리소스}

일부 옵션을 놓친 것 같습니다. 다음을 추가해 보십시오.

position: relative;
top: 25px;

span요소는display:inline;기본적으로 당신은 그것을 만들어야 합니다.inline-block또는block

CSS를 이렇게 변경합니다.

span.first_title {
    margin-top: 20px;
    margin-left: 12px;
    font-weight: bold;
    font-size:24px;
    color: #221461;
    /*The change*/
    display:inline-block; /*or display:block;*/
}

span수직 여백을 지원하지 않는 인라인 요소입니다.바깥쪽에 여백을 두시오.div대신.

<span>태그가 허용되지 않음margin,padding당신은 약간의 CSS 스타일을 추가하고 당신의 것을 만들어야 합니다.<span>로서 꼬리표를 달다.block또는inline-block사용하기 위하여margin,padding위해서<span>태그, 하지만 가장 좋은 사용 방법은div꼬리표를 달다

span{ display:inline-block or block;}

항상 한 가지 사항을 기억하십시오. 인라인 요소에는 마진을 수직으로 적용할 수 없습니다.수직 여백을 적용하려면 표시 유형을 다음으로 변경합니다.block또는inline-block

span {
    display: inline-block;
}

언급URL : https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element