CSS margin-top ne fonctionne pas

http://anonoz.com/armesh//contact_form/

Le lien ci-dessus montre un formulaire de contact que je fais.
Je suis en train de faire comme sur l'image à droite. Je dois donner le texte "Essayez-nous aujourd'Hui" un margin-top de 20px.

HTML: 

<body>

<div id="form_container">
    <div id="form_body">
        **<span class="form_head">Try us Today</span>**
        <br/>
        <span class="form_subhead">30 day money back gurantee</span>
                <form id="enquiry_form" method="post" action="scripts/contact-form-handler.php"> 

                        <input type="text" name="name" id="name" value="Name" />

                        <input type="text" name="contact" id="contact" value="Contact Number" />

                        <input type="text" name="e-mail" id="email" value="Email" />

                       <input id='submit_button' type="submit" value="Get Your Space - NOW" />
                </form>
    </div>    
</div>

<img src="form2.jpg"/>
</body>

CSS: 

.form_head {
    margin-top: 20px;
    color:#58585a;
    font-size:22px;   
}

Le CSS devrait avoir poussé le .form_head 20px contre le #form_body div. Cependant rien ne s'est passé. J'ai même expérimenté avec Firebug et outils de développement Chrome mais n'a pas obtenu la moindre idée de pourquoi cela se produit. J'ai aussi essayé le réglage de la hauteur de #form_body div pour correspondre à la forme de la hauteur, alors il ya de la place pour la .form_head être poussé vers le bas, mais ça ne marche toujours pas.

J'ai été codant pour 3 mois maintenant et j'ai souvent confrontés à ce type de problème. J'ai toujours pirater mon moyen de sortir simplement par l'incrustation dans certains de positionnement des codes pour le faire.

Cependant, je ne veux pas faire la même chose aujourd'hui, mais veulent comprendre pourquoi est-ce qui se passe et comment le résoudre de la manière appropriée. Quelqu'un pourrait s'il vous plaît faire un peu de lumière et de m'instruire sur ce point?

Je l'ai placé dans un laps de prévenir le défaut h1,h2,... style. J'ai toujours utiliser la position de méthodes pour le faire, mais c'est comme le piratage de ma grâce. Est-il un autre moyen? Plus important encore, je veux savoir pourquoi il se passe?
Double Possible de Pourquoi est-ce CSS margin-top style fonctionne pas?

OriginalL'auteur Armesh Singh | 2013-05-08

  1. 16

    <span> éléments ont une valeur par défaut display propriété de inline. inline éléments ne sont pas affectés par les marges ou les rembourrages, entre autres choses.

    Juste donner .form_head un display:block ou display:inline-block.

    .form_head {
    margin-top: 20px;
    color:#58585a;
    font-size:22px;  
    display:block; /* Add this */ 
}

    Plus de lecture:
    La différence entre le "bloc" et "inline"

    Quel est le problème Avec Display: Inline-Block?

    Je n'ai jamais connu ce qui fait que les éléments en ligne ne sont pas affectés
    Yep, il y a aussi le inline-block de la propriété, qui est une sorte de mélange entre inline et block. L'élément a en quelque sorte se comporte comme un inline élément, mais vous pouvez modifier la largeur, la hauteur, les marges et padding. J'ai mis à jour ma réponse avec un autre lien pour avoir quelques informations sur inline-block.

    OriginalL'auteur Jace

  2. 1

    Vous êtes à l'application de cette règle CSS pour une durée de. Un span est un élément inline. De le changer pour un élément de niveau bloc comme un div ou ajouter display:block ou display:inline-block à votre règle CSS.

    Wow, maintenant ça fonctionne. Je vous remercie. Mais pourriez-vous m'expliquer pourquoi élément inline se comporte de cette manière?
    J'ai un lien pour plus de la lecture de ma réponse.
    Grâce Jace, je voudrais le lire.
    Jace a lié une bonne ressource aussi Mozilla éléments de niveau Bloc c'est une bonne lecture de la ressource. il vaut le coup de passer un peu de temps à savoir comment les éléments sont affichés sur la page. Ce sera la clé lorsque vous commencez à utiliser le positionnement et les flotteurs.

    OriginalL'auteur JMWhittaker

  3. 1

    vous devez utiliser l'afficheur: propriété de bloc.
    Voici votre code : 

    .form_head {
    display:block;
    margin-top: 20px;
    color:#58585a;
    font-size:22px;  
}

    OriginalL'auteur naresh kumar

  4. 1

    Vous pouvez essayer de

    display:block;

    ou vous pourriez faire padding-top au Lieu de margin-top, ou avez-vous envisagé de top?

    OriginalL'auteur internetgho5t