¿Margen superior no funciona para el elemento span?

¿Alguien puede decirme lo que codifiqué mal? Todo está funcionando, lo único es que no hay margen en la parte superior.

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 diferencia de ¹div , que son elementos de nivel de bloque que pueden ocupar todos los lados, ² no pueden, ya que es un elemento en línea que ocupa márgenes solo horizontalmente.p marginspan

De la especificación :

Las propiedades de margen especifican el ancho del área de margen de un cuadro. La propiedad abreviada 'margen' establece el margen para los cuatro lados, mientras que las otras propiedades de margen solo establecen su lado respectivo. Estas propiedades se aplican a todos los elementos, pero los márgenes verticales no tendrán ningún efecto en los elementos en línea no reemplazados.

Demo 1 (Vertical marginno aplicada como spanes un inlineelemento)

¿Solución? Haz tu spanelemento, display: inline-block;o display: block;.

Demo 2

Te sugiero que uses display: inline-block;como será inlineasí block. Por lo que es blocksólo resultará en su elemento para rendir en otra línea , como blockelementos a nivel de toma 100%de espacio horizontal en la página, a menos que se hacen inline-blocko son floateda lefto right.

^{1. Elementos de nivel de bloque - Fuente MDN}

^{2. Elementos en línea - Recurso MDN}

Parece que te perdiste algunas opciones, intenta agregar:

position: relative;
top: 25px;

spanes un elemento en línea que no admite márgenes verticales. Ponga el margen en el exterior en su divlugar.

spanel elemento es display:inline;por defecto que necesita hacerlo inline-blockoblock

Cambia tu CSS para que sea así

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

Recuerde siempre una cosa: no podemos aplicar el margen verticalmente a los elementos en línea, si desea aplicar, cambie su tipo de visualización a bloque o bloque en línea. Por ejemplo, span {display: inline-block;}