Margin-Top non funziona per l'elemento span?

Qualcuno può dirmi cosa ho scritto di sbagliato? Tutto funziona, l'unica cosa è che non c'è margine in alto.

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

A differenza di ¹div , che sono elementi a livello di blocco che possono occupare tutti i lati, ² non possono essere in lineap marginspan elemento che occupa i margini solo in orizzontale.

Dalla specifica :

Le proprietà del margine specificano la larghezza dell'area del margine di una casella. La proprietà abbreviata 'margin' imposta il margine per tutti e quattro i lati mentre le altre proprietà del margine impostano solo il rispettivo lato. Queste proprietà si applicano a tutti gli elementi, ma i margini verticali non avranno alcun effetto sugli elementi incorporati non sostituiti.

Demo 1 (verticale marginnon applicato come spanè un inlineelemento)

Soluzione? Crea il tuo spanelemento, display: inline-block;o display: block;.

Demo 2

Ti suggerirei di usare display: inline-block;come sarà inlinecosì come block. Il che rende blocksolo si tradurrà in vostro elemento per rendere su un'altra linea , come blockelementi di livello prendono 100%di spazio orizzontale sulla pagina, a meno che non sono fatte inline-blocko sono floateda lefto right.

^{1. Elementi a livello di blocco - Sorgente MDN}

^{2. Elementi incorporati - Risorsa MDN}

Sembra che tu abbia perso alcune opzioni, prova ad aggiungere:

position: relative;
top: 25px;

spanè un elemento incorporato che non supporta i margini verticali. Posiziona invece il margine esterno div.

spanl'elemento è display:inline;di default è necessario farlo inline-blockoblock

Cambia il tuo CSS in modo che sia così

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

Ricorda sempre una cosa che non possiamo applicare il margine in verticale agli elementi incorporati, se vuoi applicarlo, cambia il suo tipo di visualizzazione per bloccare o inline block.per esempio span {display: inline-block;}