Margines górny nie działa dla elementu zakresu?

Czy ktoś może mi powiedzieć, co źle zakodowałem? Wszystko działa, jedyne, że u góry nie ma marginesu.

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">[email protected]</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;
}   

W przeciwieństwie div, p ¹ które są Blok Poziom elementy, które mogą podjąć się marginze wszystkich stron, span² nie może jak to jest Inline element, który zajmuje się tylko poziomo marże.

Ze specyfikacji :

Właściwości marginesu określają szerokość pola marginesu pola. Skrócona właściwość „marginesu” określa margines dla wszystkich czterech stron, podczas gdy inne właściwości marginesu ustawiają tylko ich odpowiednią stronę. Te właściwości dotyczą wszystkich elementów, ale pionowe marginesy nie będą miały żadnego wpływu na niewymienione elementy wbudowane.

Demo 1 (w pionie marginnie są stosowane, jak spanto inlineelement)

Rozwiązanie? Zrób swój spanelement display: inline-block;lub display: block;.

Demo 2

Sugerowałbym, aby użyć display: inline-block;tak, jak będzie, inlinejak również block. Dokonywanie to blocktylko spowoduje elemencie do renderowania na innej linii , a blockelementy poziomu wziąć 100%powierzchni poziomej na stronie, chyba że są one wykonane inline-blocklub są floatedna leftlub right.

^{1. Elementy poziomu bloku - źródło MDN}

^{2. Elementy wbudowane - zasób MDN}

Wygląda na to, że przegapiłeś niektóre opcje, spróbuj dodać:

position: relative;
top: 25px;

spanjest elementem wbudowanym, który nie obsługuje marginesów pionowych. divZamiast tego umieść margines na zewnętrznej stronie .

spanelement jest display:inline;domyślnie trzeba go zrobić inline-blocklubblock

Zmień swój CSS tak, aby był taki

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

Zawsze pamiętaj o jednej rzeczy, której nie możemy zastosować marginesu w pionie do elementów wstawianych, jeśli chcesz zastosować, zmień typ wyświetlania na blok lub wstawiany blok. Na przykład span {display: inline-block;}