将margin-bottom添加到最小高度容器的子级具有奇怪的效果

Question

第一行的高度远大于其.content div的边距底部，因此包含了margin-bottom（并且不应影响其容器外的任何内容）。然而，两排之间存在差距......非常神秘。

See this plunker for a visual representation and code

HTML：

<div class="row row1">
  Row 1 (min-height: 100px)
  <div class="content">Content (margin-bottom: 10px;)</div>
</div>
<div class="row row2">
  Row 2:  Why the gap?  The margin-bottom on Content stops WAY short of this div.
</div>

CSS：

  .row1 { min-height: 100px; }
  .row1 .content { margin-bottom: 10px; }

注意：

• 将min-height更改为height可消除差距
• 将overflow:hidden;添加到第一行可消除差距
• 我在Mac上使用Chrome。我没有机会在任何其他浏览器（午餐时间）进行测试

为什么会发生这种情况？这是一个错误吗？

Answer 1

'.row'和'.content'的底部边距正在崩溃。

当发生这种情况时，我通常会添加1px透明边框，如下所示：

.row1 { border-bottom: 1px solid transparent; min-height: 100px; background: #001133; color: #fff; }