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

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

---

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

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;*/
}

---

Always remember one thing we can not apply margin vertically to inline elements ,if you want to apply then change its display type to block or inline block.for example span{display:inline-block;}

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