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

Question

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

Answer 1

Contrairement à div , p 1 qui sont Niveau du bloc éléments qui peuvent prendre margin de tous les côtés, span 2 ne peut pas, car c'est un En ligne qui n'occupe les marges qu'horizontalement.

Desde el spécification :

Les propriétés de marge spécifient la largeur de la zone de marge d'une boîte. L'adresse 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 Ces propriétés s'appliquent à tous les éléments, mais les marges verticales n'auront pas d'effet sur les éléments en ligne non remplacés. n'auront aucun effet sur les éléments en ligne non remplacés.

Démo 1 (Vertical margin non appliqué comme span est un inline élément)

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

Démo 2

Je vous suggère d'utiliser display: inline-block; comme il le sera inline ainsi que block . Le rendre block seulement aura pour résultat de rendre votre élément sur une autre ligne comme block les éléments de niveau prennent 100% de l'espace horizontal sur la page, à moins qu'ils ne soient faits inline-block ou ils sont floated a left o right .

---

1. Éléments du niveau bloc - Source MDN

2. Éléments en ligne - Ressource MDN

Answer 2

Il semble que vous ayez manqué quelques options, essayez de les ajouter :

position: relative;
top: 25px;

Answer 3

span L'élément est display:inline; par défaut, vous devez le rendre inline-block o block

Changez votre CSS pour qu'il soit comme ceci

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

span est un élément en ligne qui ne prend pas en charge les marges verticales. Placez la marge sur l'élément extérieur div à la place.

Answer 5

<span> n'accepte pas margin , padding vous devez ajouter un style css et faire de votre <span> comme block o inline-block afin d'utiliser margin , padding para <span> mais la meilleure façon de les utiliser est div étiquette.

span{ display:inline-block or block;}