Margin-Top ne fonctionne pas pour l'élément span?

Quelqu'un peut-il me dire ce que j'ai mal codé? Tout fonctionne, la seule chose est qu'il n'y a pas de marge en haut.

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

Contrairement div, p ¹ qui sont au niveau des blocs d' éléments qui peuvent prendre place marginsur tous les côtés, span² ne peut pas car il est un Inline élément qui reprend les marges horizontalement seulement.

De la spécification :

Les propriétés de marge spécifient la largeur de la zone de marge d'une boîte. La propriété abrégée «margin» définit la marge pour les quatre côtés tandis que les autres propriétés de marge définissent uniquement leur côté respectif. Ces propriétés s'appliquent à tous les éléments, mais les marges verticales n'auront aucun effet sur les éléments en ligne non remplacés.

Démo 1 (vertical marginnon appliqué comme spanun inlineélément)

Solution? Faites votre spanélément, display: inline-block;ou display: block;.

Démo 2

Je vous suggère d'utiliser display: inline-block;tel quel inlineainsi que block. Le faire blockuniquement entraînera le rendu de votre élément sur une autre ligne , car les blockéléments de niveau prennent 100%de l'espace horizontal sur la page, à moins qu'ils ne soient créés inline-blockou qu'ils soient floatedà leftou right.

^{1. Éléments de niveau bloc - Source MDN}

^{2. Éléments en ligne - Ressource MDN}

Il semble que vous ayez manqué certaines options, essayez d'ajouter:

position: relative;
top: 25px;

spanest un élément en ligne qui ne prend pas en charge les marges verticales. Mettez la marge sur l'extérieur à la divplace.

spanélément est display:inline;par défaut, vous devez le faire inline-blockoublock

Changez votre CSS pour qu'il ressemble à ça

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

Rappelez-vous toujours une chose que nous ne pouvons pas appliquer de marge verticalement aux éléments en ligne, si vous voulez l'appliquer, changez son type d'affichage en bloc ou bloc en ligne.Par exemple, span {display: inline-block;}