Question

我在父div中有两个子div。和孩子1 margin-top: -50px，孩子2 margin-bottom: -50px。

但似乎负margin-bottom在margin-top正常工作时不起作用。

有人可以告诉我为什么？

您可以在此处查看代码demo

Answer 1

我认为确实如此。子元素的底部下边距将使该子元素的下边缘低于其父元素的下边缘。如果向父级添加灰色边框，您会注意到第二个子元素位于父级之下。

#parent {
  background-color: beige;
  border: 1px solid #ddd; /* ADDED FOR VISIBILITY */
}
#child1,
#child2 {
  width: 100px;
  height: 100px;
}
#child1 {
  background-color: antiquewhite;
  margin-top: -50px;
}
#child2 {
  background-color: aliceblue;
  margin-bottom: -50px;
  border: 1px solid #000; /* ADDED FOR VISIBILITY */
}

<div>
  <div id="parent">
    <div id="child1">

    </div>
    <div id="child2">

    </div>
  </div>

</div>

Answer 2

@aotian16，您实际上是正确的，margin-bottom 没有按您预期的方式运行。

Frank Fajardo 的回答意外地给人一种它正在工作的错觉（工作意味着将 aliceblue 框向下移动 -50px）。实际情况并非如此。

解释负边距：负上边距和左边距会将它们应用到的项目移动到顶部或左侧。但是，负 BOTTOM 和 RIGHT 边距不要将它们应用到的项目移动到底部或右侧。负的右边距实际上会将元素右侧的内容拉近，而负的下边距则将内容下方的内容向上拉。

接受的答案似乎显示 aliceblue 项向下移动的原因是：

1st：子项 1 的 TOP 应用了负边距，这允许子项 2 与其一起向上移动，而背景项保持原位。

2nd：在将负上边距应用于子项 1 后将负边距应用于子项 2 不会将子项 2 向下移动超过背景。它实际上将背景颜色 UP 拉入 child 2。打开和关闭负底边距，观察 child 2 不向下移动，背景向上移动。

所以并不是负底边距不起作用，它只是没有像我们假设的那样起作用。我希望它确实以这种方式工作..

#parent {
  background-color: beige;
  border: 1px solid #ddd; /* ADDED FOR VISIBILITY */
}
#child1,
#child2 {
  width: 100px;
  height: 100px;
}
#child1 {
  background-color: antiquewhite;
  margin-top: -50px;
}
#child2 {
  background-color: aliceblue;
  margin-bottom: -50px;
  border: 1px solid #000; /* ADDED FOR VISIBILITY */
}
<div>
  <div id="parent">
    <div id="child1">

    </div>
    <div id="child2">

    </div>
  </div>

</div>

div负边缘 - 底部不起作用

2 个答案: