CODEWITHSUNDEEP
htmlcss
StoneHeart
StoneHeart

Reputation: 16590

Why position of div is affected by margin-top of its child?

Here is my markup

CSS

body{
    background-color:#353535;    
}
#parent{
    background-color:#eee;
}
#child{
    background-color:#1b1b1b;
    margin:60px auto 10px;
    width:100px;
}

HTML

<div id="parent">
    <div id="child">child</div>
</div>

Result: http://jsfiddle.net/W74TZ/

Upvotes: 3

Views: 1007

Answers (2)

meder omuraliev
meder omuraliev

Reputation: 186562

Margin collapsing rules. If the margin-top reaches the top of the <body> without anything conflicting ( like a padding-top:1px on #parent ) then the parent will "inherit" that.

You can avoid this by setting a padding-top:60px on #parent instead.

Upvotes: 6

Phrogz
Phrogz

Reputation: 303254

It's part of the CSS spec. You can read up more on this by Googling "margin collapsing", e.g. http://www.howtocreate.co.uk/tutorials/css/margincollapsing

Upvotes: 4

Related Questions