여백 상단이 범위 요소에서 작동하지 않습니까?

누군가 내가 잘못 코딩 한 것을 말해 줄 수 있습니까? 모든 것이 작동하지만 유일한 것은 상단에 여백이 없다는 것입니다.

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 ¹ 과 달리 ² 는 가로 방향으로 만 여백을 차지하는 인라인 요소 이므로 사용할 수 없습니다 .marginspan

로부터 사양 :

여백 속성은 상자의 여백 영역 너비를 지정합니다. 'margin'속기 속성은 네면 모두에 대한 여백을 설정하고 다른 마진 속성은 해당 면만 설정합니다. 이러한 속성은 모든 요소에 적용되지만 수직 여백은 대체되지 않은 인라인 요소에 영향을 미치지 않습니다.

데모 1 (수직 은 요소 margin로 적용되지 않음 )spaninline

해결책? 귀하의 확인 span요소를, display: inline-block;또는 display: block;.

데모 2

당신이 사용하는 제안 display: inline-block;이있을 것 같은 inline뿐만 아니라 block. 그것을 만들기 block에만 렌더링하기 위해 요소가 발생합니다 다른 줄에 같은 block수준의 요소를 가지고 100%그들이 만들어하지 않는 한 페이지에 가로 공간의 inline-block또는 그들이 floated에 left나 right.

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

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

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

position: relative;
top: 25px;

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

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 {display : inline-block;}).