Question

我有以下内容：

<div id="x">
   <div id="modal-body">
      <div class="modal-input-row">
       xxx
      </div>
   </div>
</div>

#modal-body {
  display: block;
  margin-top: 5rem;
}

.modal-input-row {
  margin-top: 2rem;
  overflow: hidden;
  display: block;
}

当我使用Google Chrome开发者工具查看这些内容时，我看到了：

模态体顶部区域在#x <div>
模态输入行顶部区域从#x <div>

由于模态输入行在模态体内部，然后乳清不能在#x <div>下面开始7rem吗？

Answer 1

您所看到的是一个称为margin collapse的案例。它发生在几种情况下，你的被称为在父母的上边缘和第一个孩子之间没有间隙的情况。

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或者max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

建议使用填充，因为它们不会崩溃。

在W3C box model specification

中也会更详细地讨论保证金崩溃

Answer 2

在您的HTML中，modal-input-row是一个类。

CSS标记应为

.modal-input-row {
    margin-top: 2rem;
    overflow: hidden;
    display: block;
}

OR：

更改

<div class="modal-input-row">

到

<div id="modal-input-row">

Answer 3

按照这个小提琴：http://jsfiddle.net/gjNAW/似乎没事。

边界缺席使其崩溃。

请看这个没有国界的人：http://jsfiddle.net/gjNAW/1/

除了：

（1）你错放了“。”为了上课。

（2）无需明确指定display:block，因为div是块元素。

为什么<div>中的<div>没有注意到外部<div>边距？</div> </div> </div>

3 个答案: