Geek Answers Handbook

CSS margin-top not working

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

The link above shows the contact form I am doing. I am trying to do this as the picture on the right. I have to give the text "Try it 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; }

CSS was supposed to push .form_head 20px to the #form_body div. However, nothing happened. I even experimented with the Firebug and Chrome developer tools, but didn't understand why this was happening. I also tried setting the height of the #form_body div to fit the height of the form, so there is room for formatting .form_head, but it still doesn't work.

I have been coding for 3 months, and I often encounter this type of problem. I always work my way out just by inserting some positioning codes to do this.

However, I do not want to do the same today, but I want to understand why this is happening and how to solve it properly. Can someone shed light and enlighten me on this?

+7
source share
4 answers
Items

<span> have a display property of inline by default. Inline elements are independent of margins or shims, among 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 details:
The difference between the "block" and the "built-in"
What is the deal with the display: the built-in unit?

+16
source

You apply this CSS rule to a range. Span is a built-in element. Change it to a block level element, such as a div, or add display:block or display:inline-block to your CSS rule.

+1
source

you need to use the dispaly: block property. Here is your code:

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

You can try

 display:block;

or could you do padding-top instead of margin-top , or did you count top ?

+1
source

More articles:


All Articles