CSS margin-top nicht

http://anonoz.com/armesh//contact_form/CSS margin-top nicht

den Link oben arbeiten zeigt eine Kontaktform, die ich machen werde. Ich versuche es wie das Bild rechts zu machen. Ich muss den Text "Versuchen Sie uns heute" eine margin-top von 20px geben.

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

Die CSS haben die .form_head 20px nach unten gegen die #form_body div geschoben sollte. Es ist jedoch nichts passiert. Ich habe sogar mit Firebug- und Chrome-Entwicklertools experimentiert, aber keine Ahnung, warum dies passiert. Ich habe auch versucht, die Höhe von #form_body div auf die Höhe des Formulars anzupassen, so gibt es Platz für die .form_head gedrückt werden, aber es funktioniert immer noch nicht.

Ich habe jetzt seit 3 Monaten codiert und ich oft konfrontiert diese Art von Problem. Ich hacke mich immer raus, indem ich einfach einige Positionierungscodes eingebe, um es zu erledigen.

Allerdings möchte ich heute nicht dasselbe machen, aber ich möchte verstehen, warum das passiert und wie man es richtig löst. Könnte jemand bitte etwas Licht geben und mich darüber aufklären?

Quelle

2013-05-08 Armesh Singh

Ich platzierte es in einem Bereich, um die Standard-h1, h2 ... Styling zu verhindern. Ich benutze immer die Positionsmethoden, um es zu erledigen, aber das ist, als würde ich mich durchhacken. Gibt es einen anderen Weg? Am wichtigsten möchte ich wissen, warum es passiert? –

Mögliches Duplikat von [Warum funktioniert dieser CSS-Rand-Top-Stil nicht?] (Http://stackoverflow.com/questions/9519841/why-does-sthis-css-margin-top-style-not-work) –

<span> Elemente haben eine Standardeinstellung display Eigenschaft von inline. inline Elemente werden unter anderem nicht durch Ränder oder Abstände beeinflusst. Geben Sie .form_head eine display:block oder display:inline-block.

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

More reading:
The difference between "block" and "inline"
What’s the Deal With Display: Inline-Block?

Quelle

2013-05-08 08:02:30 Jace

Ich habe nie gewusst, dass Inline-Elemente nicht betroffen sind –

@ArmeshSingh Ja, es gibt auch die 'Inline-Block'-Eigenschaft, die eine Art Mischung zwischen 'Inline' und' Block' ist. Die Elementart verhält sich wie ein Inline-Element, aber Sie können ihre Breite, Höhe, Ränder und Abstände ändern. Ich habe meine Antwort mit einem anderen Link zu einigen Informationen über 'Inline-Block' aktualisiert. – Jace

Sie wenden diese CSS-Regel auf einen Bereich an. Ein Bereich ist ein Inline-Element. Ändern Sie es in ein Block-Level-Element wie ein Div oder fügen Sie display:block oder display:inline-block zu Ihrer CSS-Regel hinzu.

Quelle

2013-05-08 08:01:58 JMWhittaker

Wow , jetzt geht es. Vielen Dank. Aber könnten Sie mir erklären, warum sich Inline-Elemente so verhalten? –

@ArmeshSingh Ich habe einen Link für mehr lesen in meiner Antwort. – Jace

Danke Jace Ich würde es lesen. –

Sie haben die dispaly zu verwenden: Blockeigenschaft. Hier ist der Code:

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

Quelle

2013-05-08 08:04:02

Sie

display:block;

versuchen könnte, oder Sie padding-top Statt margin-top tun könnte, oder Sie top betrachtet haben?

Quelle

2013-05-08 12:54:42 internetgho5t

CSS margin-top nicht

Antwort

Verwandte Themen