web-dev-qa-db-fra.com

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 à faire est qu'il n'y a pas de marge au sommet.

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;
}
cssmarginhtml
146
user1548544

Contrairement à div, p 1 qui sont Niveau de bloc éléments pouvant prendre margin de tous les côtés, span2 ne peut pas car c'est un Inline element qui ne prend que les marges horizontalement.

À partir de spécification :

Les propriétés de marge spécifient la largeur de la zone de marge d'un bloc. Le La propriété abrégée 'margin' définit la marge pour les quatre côtés pendant que les autres propriétés de marge définissent uniquement leur côté respectif. Celles-ci les propriétés s'appliquent à tous les éléments, mais les marges verticales n'auront pas tout effet sur les éléments en ligne non remplacés.

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

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

Démo 2

Je vous suggérerais d'utiliser display: inline-block; car ce sera inline ainsi que block. Si vous ne faites que block, votre élément restituera sur une autre ligne , étant donné que les éléments de niveau block prennent 100% d’espace horizontal sur la page, à moins qu’ils ne soient constitués par inline-block ou qu'ils soient floated à left ou right.

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

2. Eléments en ligne - Ressource MDN

236
Mr. Alien

On dirait que vous avez manqué certaines options, essayez d'ajouter: 

position: relative;
top: 25px;
48
Freelancer Mahmud

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

9
Mr Lister

span element est display:inline; par défaut, vous devez le rendre inline-block ou block

Changez votre CSS pour être comme ç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;*/
}
2
Egli Becerra

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

0
Danny