html - div 边距更改父 div 的边距

Question

我有一个小问题，我不知道为什么会发生。我有 2 个 div 包装器，一个所谓的“mainWrapper”，它有一个背景图像和一个名为“loginWrapper”的 div 子级。 我希望登录 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%;
}