2

我有一个小问题，我不知道为什么会这样。我有 2 个 div Wrapper，一个所谓的“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;
}
4

2 回答 2

2

是的，它会为父级添加边距。改为尝试定位。\

 div#mainWrapper {
   position: relative;
 }

div#loginWrapper {
    position: relative;
    top: 15%;
}
于 2013-06-30T17:06:52.480 回答
2

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

  1. 向父 div 添加 1px padding-top 或 border-top
  2. 使父 div 建立新的块格式化上下文（例如，通过向其添加溢出：隐藏或将其显示更改为显示：表）
  3. 将 :before 伪元素与 display: table 添加到父 div 中，就像流行的Micro Clearfix hack中一样。
于 2013-06-30T17:37:41.253 回答