Margin-Top não está funcionando para o elemento span?

Alguém pode me dizer o que eu codifiquei errado? Tudo está funcionando, a única coisa é que não há margem no topo.

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

Ao contrário div, p ¹ que são elementos de nível de bloco que podem ser ocupados marginpor todos os lados, span² não pode, pois é um elemento Inline que ocupa margens apenas horizontalmente.

A partir da especificação :

As propriedades da margem especificam a largura da área da margem de uma caixa. A propriedade abreviada de 'margem' define a margem para todos os quatro lados, enquanto as outras propriedades da margem definem apenas o respectivo lado. Essas propriedades se aplicam a todos os elementos, mas as margens verticais não terão efeito nos elementos inline não substituídos.

Demo 1 (vertical marginnão aplicada como spané um inlineelemento)

Solução? Faça o seu spanelemento, display: inline-block;ou display: block;.

Demo 2

Sugiro que você use display: inline-block;como será inlinetão bem quanto block. A criação blockapenas fará com que seu elemento seja renderizado em outra linha , pois os blockelementos de nível ocupam 100%espaço horizontal na página, a menos que sejam criados inline-blockou sejam floatedpara leftou right.

^{1. Elementos de nível de bloco - Origem MDN}

^{2. Elementos embutidos - Recurso MDN}

Parece que você perdeu algumas opções, tente adicionar:

position: relative;
top: 25px;

spané um elemento embutido que não suporta margens verticais. Coloque a margem no exterior div.

spanelemento é display:inline;por padrão, você precisa torná-lo inline-blockoublock

Mude seu CSS para ficar assim

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

Lembre-se sempre de uma coisa que não podemos aplicar margem verticalmente aos elementos embutidos; se você desejar aplicar, altere o tipo de exibição para bloco ou bloco embutido. Por exemplo, span {display: bloco embutido;}