Why isn't 'margin-top' property working?

Question

I am aware about the concept of 'margin-collapse'. But , why am I not able to see 10 px margin on the top of the first box here. The top box(which has the id 'first') should have 10px margin above it. If this is not the correct wat to get it, then what is it? And, why this doesn't work.

CSS:

#Main{
background-color: gray;
position: relative;
width: 200px;
height: 300px;  
}


.box{
position:relative;
height: 60px;
width: 175px;
background: black;
margin: 10px 10px 10px 10px;
}

HTML:

<div id="Main"> 
    <div id="first" class="box"></div>
    <div id="second" class="box"></div>
    <div id="third" class="box"></div>
</div>

I know one way could be that we can give 10px padding to the parent div. But then why doesn't this thing work?

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) — BoltClock, May 26 '13 at 09:40
@BoltClock♦ no, that is not the answer to my question. I didnt provide any margin to the parent element. So, how can they collapse? — Navneet Saini, May 26 '13 at 09:42
Oh, I read it wrong. The same principle applies though, *even if the parent element has zero margin*. — BoltClock, May 26 '13 at 09:49
@BoltClock♦ How can it be? How will the margins collapse when there is no margin being provided to the outer parent div? — Navneet Saini, May 26 '13 at 09:52
@BoltClock♦ And then how can it be correted? By proving 'padding-top' to the parent div or by proving 'top' to 'box class'. Is there no way to correct it using 'margin' property? — Navneet Saini, May 26 '13 at 09:54

Surfine · Answer 1 · 2013-05-26T09:54:42.837

2

The margin: 10px 10px 10px 10px in your code moves the "Main" box as well.
If you want to move the box with id "first" only, use position:relative; top: 10px;
jsfiddle demo

edit: I don't know to say for sure why this happens but my guess is it is because the display of the "Main" box is block by default.
When you use display: inline-block; on the "Main" box, the problem is fixed. (jsfiddle)

edited May 26 '13 at 09:54

answered May 26 '13 at 09:45

Surfine

392
2
5
15

can you please explain that how 'margin: 10px 10px 10px 10px' moves the main box? – Navneet Saini May 26 '13 at 09:47

Kevin Lynch · Accepted Answer · 2013-05-26T11:10:42.380

This is how browsers interperit the code. It does not output the expected result which would be a 10px gap between the top of the child and the outter parent. You could add padding-top to the parent, alternatively you could assign overflow:auto; to your main div.

DEMO http://jsfiddle.net/kevinPHPkevin/2f4Kz/4/

#Main {
    background-color: gray;
    position: relative;
    width: 200px;
    height: 300px;
    overflow:auto;
}

Another way around this is to add a transparent border around the main div (stops margin collapsing)

#Main {
        background-color: gray;
        position: relative;
        width: 200px;
        height: 300px;
        border: thin solid transparent;
    }

The third a final option (to my knowledge) is to stop the margin collapsing by setting padding-top: 1px; margin-top: -1px; to the parent div

#Main {
    background-color: gray;
    position: relative;
    width: 200px;
    height: 300px;
    padding-top: 1px;
    margin-top: -1px;
}

Why isn't 'margin-top' property working?

2 Answers2