CSS margin-top not working

Question

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?

I placed it in a span to prevent the default h1,h2... styling. I always use the position methods to get it done, but that is like hacking my through. Is there any other way? Most importantly, I want to know why it's happening? — Armesh Singh, May 08 '13 at 07:57
Possible duplicate of [Why does this CSS margin-top style not work?](http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work) — Félix Adriyel Gagnon-Grenier, Mar 17 '16 at 03:44

Jace · Accepted Answer · 2013-05-08T08:10:11.090

21

<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?

edited May 08 '13 at 08:10

answered May 08 '13 at 08:02

Jace

3,052
2
22
33

I've never known this fact that inline elements are not affected – Armesh Singh May 08 '13 at 08:09
@ArmeshSingh Yep, there is also the `inline-block` property too, which is kind of a mixture between `inline` and `block`. The element kind of behaves like an `inline` element, but you can modify its width, height, margins and padding. I updated my answer with another link to some information about `inline-block`. – Jace May 08 '13 at 08:11

score 1 · Answer 2 · answered May 08 '13 at 08:01

1

You are applying that CSS rule to a span. A span is an inline element. Change it to a block level element like a div or add display:block or display:inline-block to your CSS rule.

answered May 08 '13 at 08:01

JMWhittaker

3,633
3
23
30

Wow, now it's working. Thank you. But could you explain to me why inline element behaves in that manner? – Armesh Singh May 08 '13 at 08:04
Jace has linked a good resource also [Mozilla Block level elements](https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements) is a good reading resource. it's worth spending a bit of time knowing how elements are displayed on the page. This will be key when you start using positioning and floats. – JMWhittaker May 08 '13 at 08:10

score 1 · Answer 3 · answered May 08 '13 at 08:04

1

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

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

answered May 08 '13 at 08:04

naresh kumar

2,165
3
19
21

score 1 · Answer 4 · answered May 08 '13 at 12:54

1

You could try

display:block;

or you could do padding-top Instead of margin-top, or have you considered top?

answered May 08 '13 at 12:54

electrikmilk

1,013
1
11
23

CSS margin-top not working

4 Answers4