родственник (расположено) ДИВ с верхним краем внутри другого относительного 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; 
} 

Интересно, что из-за края div2 (дочернего элемента) внутри div1 (родителя) и того факта, что он расположен относительно, это толкает div1 (что странно) вниз на 100 пикселей. Еще более интересно, если я либо добавил границу в 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

Как уже было предложено Арам Мкртчян, самый простой исправить в этом случае, вероятно, добавить overflow: hidden к .header. 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 
}