Div элемент меняет положение (маржа) родительский DIV

Question

У меня есть следующая проблема:

У меня есть DIV элемент с фоновым изображением, которое позиция в точности, как я хочу. Но когда я добавляю в него дочерний div, он изменяется. (Theres небольшой запас наверху)

Я хочу знать, почему это происходит и как это исправить.

CSS код:

body,html{ 
    height:100%; 
} 

body { 
    margin: 0; 
    background-color: green; 
    background: url(../images/backround_red.png) no-repeat center center fixed; 
    background-size: cover; 
} 

div#mainWrapper { 
    position: relative; 
    text-align: center; 
    margin: auto; 
    width: 70em; 
    height:100%; 
    background: url(../images/header.jpg) no-repeat center center fixed; 
    background-size: cover; 
    padding-left: 4em; 
} 

div#loginWrapper { 
    position: relative; 
    top: 15%; 
    margin: 0; 
} 

скриншоты:

без childdiv:

с childdiv:

JSFiddle: http://jsfiddle.net/DUtb4/

Answer 1

Вы должны переопределить по умолчанию16px из margin-top и margin-bottom из <p> элемента.

Добавить это в CSS

#loginWrapper > p { 
    margin: 0; 
} 

Demo: http://jsfiddle.net/DUtb4/3/

Answer 2

Попробуйте изменить mainWrapper к:

div#mainWrapper { 
    position: relative; 
    text-align: center; 
    margin: 0 auto; /* Added a 0 to the beginning */ 
    width: 70em; 
    height:100%; 
    background: url(../images/header.jpg) no-repeat center center fixed; 
    background-size: cover; 
    padding-left: 4em; 
} 

Также добавьте утеплитель: 0; телу тега.

Answer 3

Вы помещаете это поверх css, это поможет вам.

* { 
    margin : 0; 
    padding : 0; 
} 

this is here done changes on your content