は相対（位置）のdiv要するに

Question

、私は次のスタイルを持つ、比較的配置のdivを持っている：

.div1 { 
    background-image: url(../images/header.jpg); 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 269px; 
    margin:0 auto; 
    padding:0px; 
    position: relative; 
    background-position: center top; 
} 

とその中の別のdivが、このようなスタイル：

.div2 { 
    position: relative; 
    width: 815px; 
    height: 74px; 
    margin-top:100px; 
} 

興味深いことに、div1（親）内のdiv2（子）のマージンとそれが相対的に配置されていることにより、これは100px単位でdiv1（奇妙なことです）をプッシュします。さらに興味深いことに、div1に境界線を追加したり、div1に何かを書き込んだりすると、この動作はなくなります。

なぜこのようなことが起こっているかを知っていて、この問題を解決するきっかけがあれば、私はあなたの脳を選ぶことが大好きです。

Answer 1

があります。

スペック：

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

いくつか簡単に読み：

• http://complexspiral.com/publications/uncollapsing-margins/
• http://reference.sitepoint.com/css/collapsingmargins
• http://www.howtocreate.co.uk/tutorials/css/margincollapsing

すでにアラムMkrtchyanによって示唆されるように、この場合の最も簡単な修正は.headerにoverflow: hiddenを追加するために、おそらくです。 Here are some more ideas.

Answer 2

これが原因で、 "崩壊の余白" で何が起こっている例

http://jsfiddle.net/amkrtchyan/urNRR/

.header { 
    background-image: url(../images/header.jpg); 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 269px; 
    margin:0 auto; 
    padding:0px; 
    position: relative; 
    background-position: center top; 
    overflow: hidden // add this 
}