div元素更改父div的位置（边距）

Question

我有以下问题：

我有一个带有背景图像的div元素，其位置与我想要的完全相同。但是当我在其中添加一个子div时，它会发生变化。 （顶部有一小部分）

我想知道为什么会这样，以及如何解决它。

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

你把它放在css之上，这对你有帮助。

* {
   margin  : 0;
   padding : 0;
}

this is here done changes on your content

Answer 2

您必须覆盖16px元素的margin-top和margin-bottom的 默认 <p>。

在CSS中添加

#loginWrapper > p {
    margin: 0;
}

演示：http://jsfiddle.net/DUtb4/3/

Answer 3

尝试将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; 身体标签。