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

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;
}

当我使用工具查看这些工具时，我看到：

• 模态体顶部区域开始在#x <div>下方5 5rem。
• 模态输入行顶部区域开始在#x <div>下面5 5rem。

由于模态输入行在模态体内部，那么它不是在#x <div>下面启动7 7rem吗？

Answer 1

你看到的是一个叫做margin collapse的案子。在几种情况下都会发生这种情况，而您的情况就是在父母和第一个孩子之间没有间隙的场景。

如果没有边界、填充、内联内容或清除来将块的边缘顶部与其第一个子块的顶部分隔，或者没有边界、填充、内嵌内容、高度、最小高度或最大高度来将块的边缘底部与其上一个子块的边缘底部分开，那么这些边距就会崩溃。崩溃的边距在父级之外结束。

最好用垫子代替，因为它们不会倒塌。

在W3C box model specification中还将更详细地讨论边缘崩溃。

Answer 2

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

CSS标记应该是

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

或：

变化

<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是块元素。