html - 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;
}

这是对您的内容所做的更改

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；到正文标签。