Margin-Top no funciona para el elemento span?

Question

¿Puede alguien decirme qué 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; 
} 

Answer 1

diferencia de div, p que son Block Level elementos que pueden tardar hasta margin en todos los lados, span no puede ya que es un elemento Inline que ocupa márgenes sólo horizontalmente.

Desde el specification:

propiedades de margen especifican el ancho de la zona del margen de una caja. La propiedad abreviada de '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 sobre elementos en línea no reemplazados.

Demo 1 (Vertical margin no aplica como span es un elemento inline)

solución? Haga su elemento span, display: inline-block; o display: block;.

Demo 2

sugeriría que use display: inline-block; ya que será inline, así como block. Por lo que es solamente block dará lugar a su elemento para hacer on another line, como elementos de nivel block toman 100% de espacio horizontal en la página, a menos que se hacen inline-block o son floated a left o right.

---

^{1. Block Level Elements - MDN Fuente}

^{2.Inline Elements - Recursos MDN}

Answer 2

span es un elemento en línea que no admite márgenes verticales. Ponga el margen en el exterior div en su lugar.

Answer 3

span elemento es display:inline; por defecto que necesita para que sea inline-block o block

Cambiar el CSS que ser 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;*/ 
} 

Answer 4

se ve como se ha perdido algunas opciones, tratar de agregar:

position: relative; 
top: 25px;