Question

我有一个小问题，我不知道为什么会这样。我有2个div Wrappers，一个所谓的“mainWrapper”，它有一个背景图像，这个div的子节点叫做“loginWrapper”。我希望登录Wrapper从顶部定位15％，但如果我只是添加边距，它似乎也会改变父div（mainWrapper）的边距。

有人可以向我解释为什么会发生这种情况，以及如何解决这个问题？

代码：

HTML：

<div id="mainWrapper">
    <div id="loginWrapper">
        <h:graphicImage id="logo" alt="spotted deluxe" url="resources/images/logo.png" />
    </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 {
    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 {
    /*margin-top: 15%;*/
}

img#logo {
    display: inline;
}

Answer 1

是的，它会为父母增加保证金。请尝试使用位置。\

 div#mainWrapper {
   position: relative;
 }

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

Answer 2

这是margin collapsing的一个特例。一些防止它的选项是：

将1px padding-top或border-top添加到父div
让父div建立新的block formatting context（例如通过添加溢出：隐藏或更改其显示以显示：table）
向父div添加：before伪元素和display：table，与流行的Micro Clearfix hack一样。

div div改变父div的边际

2 个答案: