保证金如何随着最小高度而崩溃？

Question

我在规范中读到了这个：

The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.

但至于最小高度，我不能说规范告诉我们的是事实。这是一些例子：

* {
  margin: 0;
  padding: 0;
}


/*parent with min-height*/
.block {
  width: 500px;
  min-height: 500px;
  background: rgba(4, 127, 214, 1);
  margin-bottom: 10px;
}

.child_1 {
  width: 500px;
  height: 250px;
  background: yellow;
}

.child_2 {
  width: 500px;
  height: 250px;
  background: yellowgreen;
  margin-bottom: 30px;
}

.content {
  width: 100%;
  height: 50px;
  background: pink;
}

<div class="block">
  <div class="child_1"></div>
  <div class="child_2"></div>
</div>

<div class="content"></div>

此示例向我们展示了边距可以随最小高度折叠。我说得对吗？

Answer 1

规范的那个版本可能有点混乱。您可以检查更新后的 version (2.2)，其中主要规则是：

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

...

bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height

那么你引用的规则就会变成：

The bottom margin of an in-flow block box with a 'height' of 'auto' collapses with its last in-flow block-level child's bottom margin, if:

the box has no bottom padding, and

the box has no bottom border, and

the child's bottom margin neither collapses with a top margin that has clearance, nor (if the box's min-height is non-zero) with the box's top margin.

min-height 已经不存在了。

作为旁注，您引用的规则是上面列出的主要规则的暗示，其中没有关于 min-height 的内容，因此在 min-height 与 auto won 不同的情况下，保证金会崩溃如果它发生了，我会感到惊讶（即使它不直观）。

更新

一个相关的老问题。它现在是无关紧要的，因为我们无法重现该行为，但 margin-collapsing 在所有情况下都会发生，即使 min-height 大于孩子的身高。

我想 vertically-adjacent 框边缘 是理解正在发生的事情的关键。如果 min-height 使两个元素不再相邻，则不会发生边距折叠（这是合乎逻辑的），否则您将出现边距折叠（如您的示例）。

保证金如何随着最小高度而崩溃？

How works margin collapsing with min-height?

html

css

height

specifications

margin