Menu
http://anonoz.com/armesh//contact_form/
The above link shows a contact form that I am making.
I am trying to make it like the picture in the right. I have to give the text "Try us Today" a margin-top of 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;
}
The CSS should have pushed the .form_head 20px down against the #form_body div. However nothing happened. I even experimented with Firebug and Chrome developer tools but didn't get a clue why is this happening. I also tried setting the height of #form_body div to match the form's height so there is room for the .form_head to be pushed down but it's still not working.
I've been been coding for 3 months now and I often face this type of problem. I always hack my way out by simply keying in some positioning codes to get it done.
However, I don't want do the same today, but want to understand why is this happening and how to solve it the proper way. Could someone please shed some light and educate me on this?
567
This happens because the div has no border, and no padding defined, and the CSS specification states to collapse the two top margins into a single one of the parent. (The same happens with bottom margins.)
The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
You cannot see the effect of margin-right because the 'width' property of div causes the margin of div to have more than 10px distance from the right wall of the body. Consequently, it causes the margin-right property not to have any visual effect.
<span> elements have a default display property of inline. inline elements are not affected by margins or paddings, amongst other things.
Just give .form_head a display:block or 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?
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With