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

199

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">[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;
}
css margin html user1548544
la source

Réponses:

315

Contrairement div, p 1 qui sont au niveau des blocs d' éléments qui peuvent prendre place marginsur tous les côtés, span2 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

M. Alien
la source
73

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

position: relative;
top: 25px;
Freelance Mahmud
la source
Bien que cela ne réponde pas à la question, mais c'est une bonne solution au problème!
Bruce
solution parfaite
Akitha_MJ
9

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

Monsieur Lister
la source
5

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;*/
}
Egli Becerra
la source
1

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

Danny
la source