Question

HTML

<div class="wrap">
    <div class="sub">sub</div>
</div>  

CSS

.wrap {
    width: 100px;
    height: 100px;
    background: #565656;
}

.sub {
    background: red;
    margin-top: 100px;
}

Why does the margin of sub div move wrap relatively to body and not itself relatively to wrap? (probably the dummiest question ever, but I dont get >< )
http://jsfiddle.net/QJug3/

                                                                                               

Answer 1

welcome to to wondrous world of collapsing margins:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Basically it comes down to this:
If you have two adjacent vertical margins then just one of them is used and the other is ignored. The browser assumes that you intended to have a 1 margin instead of what you would normally expect: 2 margins adding to each other.

The easiest (but not so elegant) way to achieve what you want is to give your wrap div a padding-top of 1px so that the margins are no longer adjacent.

.wrap {
 width: 100px;
 height: 100px;
 background: #565656;
 padding-top: 1px; /* add this */
}