Question

我有两个div元素，我的类容器和innercontainer具有以下CSS样式。

.container {
  width: 200px;
  height: 200px;
  background-color: green;
}
.innercontainer {
  height: 30px;
  background-color: red;
  margin: auto;
  margin-top: 80px;
}

<div class="container">
  <div class="innercontainer"></div>
</div>

我所期待的是一个几乎位于绿色广场中心的红色矩形。

我得到的是一个绿色方块顶部的红色矩形。它将我的矩形向下移动了80px，但为什么它将我的方块放在矩形下方？

如果我在广场周围放置边框，一切都按预期进行。如果我在容器类中说position: fixed也是一样。

我认为块元素在其周围容器的边界处定向。在这种情况下，在我看来，内部恒化器就像在身体上定位一样？

Answer 1

这是由于margin collapse：

流入块元素的上边距与其第一个边缘折叠如果元素没有顶部，则流入块级子级的上边距边界，没有顶部填充，孩子没有间隙。

有multiple ways来阻止这种情况，例如通过使用内联块而不是块。

.container {
  width: 200px;
  height: 200px;
  background-color: green;
}
.innercontainer {
  display: inline-block;
  width: 100%;
  height: 30px;
  background-color: red;
  margin: auto;
  margin-top: 80px;
}

<div class="container">
  <div class="innercontainer"></div>
</div>

Answer 2

由于collapsing margins你的div被推下来了。

在overflow:auto

上设置container

＆＃13;

.container {
  width: 200px;
  height: 200px;
  background-color: green;
  overflow: auto;
}

.innercontainer {
  height: 30px;
  background-color: red;
  margin-top: 80px;
}

＆＃13;

  <div class="container">
    <div class="innercontainer">
    </div>
  </div>

＆＃13;

或使用padding-top

上的container

＆＃13;

.container {
  width: 200px;
  height: 200px;
  background-color: green;
  padding-top: 80px;
  box-sizing: border-box;
}

.innercontainer {
  height: 30px;
  background-color: red;
}

＆＃13;

<div class="container">
  <div class="innercontainer">
  </div>
</div>

＆＃13;

Answer 3

您需要向父容器提供padding以将其转移到中心。从margin证明innercontainer将从顶部开始margin，如果超过高度，它将溢出父容器。

所以，你要做的事情会有点像这样：

＆＃13;

  .container {
    padding:35px;   
    width: 200px;
    height: 200px;
    background-color: green;     
  }

 .innercontainer {
   height: 30px;
   background-color: red;
   margin: 80px 0 0 0;
 }

＆＃13;

<div class="container">
  <div class="innercontainer"></div>
</div>

＆＃13;

向儿童添加保证金时，容器会发生变

3 个答案: