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

我有一个背景图像的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： enter image description here

与childdiv： enter image description here

的jsfiddle： http://jsfiddle.net/DUtb4/

来源

2013-07-12 Jakob Abfalter

改变您孩子的'保证金top'为'浸轧top' –

你是什么意思？ –

这通常是由子元素的margin-top造成的。请添加您的标记，也许jsFiddle，所以我可以肯定知道 –

必须替换默认的margin-top16px和<p>元素margin-bottom。

在你的CSS添加此

#loginWrapper > p { 
    margin: 0; 
}

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

来源

2013-07-12 12:36:40

尝试改变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; 到身体标记。

来源

2013-07-12 11:45:19

感谢您的答案，但它遗憾地没有解决问题。 –

你把这个在CSS上，这将帮助你。

* { 
    margin : 0; 
    padding : 0; 
}

this is here done changes on your content

来源

2013-07-12 12:14:41

这解决了它：D谢谢！ –

这应该只用于调试，它是一个沉重而危险的选择器......它是说'应用'边缘0'和'填充0'到一切，无处不在...;） –

@AndreaLigios或者你可以这样做在这里，在目前的情况下，使用div元素。填充：0和边距：0;或者做一个quickfix类。并把它放在马林和填充0，并使用它需要的地方.. – 2013-07-12 12:46:33

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

回答

相关问题