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

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

将此添加到您的 CSS 中

#loginWrapper > p {
    margin: 0;
}

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