CSS margin-top funktioniert nicht

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

Den obigen link zeigt ein Kontaktformular, das ich mache.
Ich bin versucht zu machen, wie das Bild in der rechten. Ich habe zu dem text "Versuchen uns Heute" ein margin-top von 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;   
}

CSS haben sollte, schob den .form_head 20px nach unten gegen die #form_body div. Ist aber nichts passiert. Ich selbst experimentierte mit Firebug und Chrome developer tools, aber nicht bekommen eine Ahnung, warum dies geschieht. Ich habe auch versucht, die Einstellung der Höhe der #form_body div entsprechend der form ist die Höhe, es ist also Platz für die .form_head werden nach unten gedrückt, aber es funktioniert immer noch nicht.

Ich habe seit der Codierung für 3 Monate jetzt, und ich oft Probleme mit dieser Art von problem. Ich habe immer hack meinen Weg einfach durch die Eingabe einiger Positionierung codes, um es getan.

Aber ich will nicht das gleiche tun heute, aber verstehen wollen, warum dies geschieht und wie es zu lösen, den richtigen Weg. Könnte jemand bitte etwas Licht und klärt mich auf diesem?

  • Ich legte es in ein span um zu verhindern, dass die Standard-h1,h2... styling. Ich benutze immer die position Methoden, um es getan, aber das ist wie hacken meine durch. Gibt es eine andere Möglichkeit? Am wichtigsten ist, ich möchte wissen, warum es passiert?
  • Mögliche Duplikate von Warum funktioniert dieser CSS-margin-top-Stil nicht arbeiten?
InformationsquelleAutor Armesh Singh | 2013-05-08
  1. 17

    <span> Elemente haben eine Standard - display Eigenschaft von inline. inline Elemente sind nicht betroffen von Margen oder Polstern, unter anderem.

    Nur geben .form_head eine display:block oder display:inline-block.

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

    Mehr Lesen:
    Der Unterschied zwischen "block" und "inline"

    Was ist der Deal Mit Display: Inline-Block?

    • Ich habe noch nie über diese Tatsache, dass inline-Elemente sind nicht betroffen
    • Yep, es ist auch die inline-block Eigenschaft zu, das ist irgendwie eine Mischung zwischen inline und block. Das element Art verhält sich wie ein inline element, aber Sie können ändern Sie die Breite, Höhe, Ränder und Füllungen. Ich aktualisiert meine Antwort mit einem anderen link zu einigen Informationen über inline-block.
    InformationsquelleAutor Jace
  2. 1

    Sie anwenden, die CSS-Regel auf ein span. Ein span ist ein inline-element. Ändern Sie es zu einem block-level-element wie ein div oder fügen Sie display:block oder display:inline-block zu Ihrer CSS-Regel.

    • Wow, jetzt funktioniert es. Danke. Aber könnten Sie mir erklären, warum inline-element verhält sich in dieser Art und Weise?
    • Ich habe einen link für mehr Lesen in meiner Antwort.
    • Dank Jace, ich würde es Lesen.
    • Jace verbunden hat eine gute Ressource, auch Mozilla Block-level-Elementen ist eine gute Lektüre Ressource. es lohnt sich, ein bisschen Zeit zu wissen, wie die Elemente auf der Seite angezeigt werden. Dies ist der Schlüssel, wenn Sie beginnen mit der Positionierung und floats.
    InformationsquelleAutor JMWhittaker
  3. 1

    verwenden Sie den dispaly: block-Eigenschaft.
    Hier ist Ihr code : 

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

    Könnten Sie versuchen,

    display:block;

    oder Sie tun können padding-top Statt margin-top oder haben Sie als top?

    InformationsquelleAutor internetgho5t
Schreibe einen Kommentar