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

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


73

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

position: relative;
top: 25px;

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.


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

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.