CSS min-height添加到子元素的下边距

I've been having a very weird CSS issue. Some of my pages have displayed an unexplained "space" between element. Inspecting the code shows that this space does not belong to any element.

我一直有一个非常奇怪的CSS问题。我的一些页面在元素之间显示了一个无法解释的“空间”。检查代码显示此空间不属于任何元素。

I've narrowed it down, and I think I know why this issue is happening. But I wanted to know, under the hood, why it's happening.

我把它缩小了，我想我知道为什么会出现这个问题。但我想知道，为什么会发生这种情况。

The issue, I think, is that min-height: 50px in the #outer selector adds the bottom margin of #inner below #outer, which results in an the unexplained space mentioned above. If it were to be replaced with height: 50px the space would disappear.

我认为，问题是#outer选择器中的min-height：50px会在#outer下面添加#inner的下边距，这会导致上面提到的无法解释的空间。如果它被替换为高度：50px，空间将消失。

This happens on Chrome but not FireFox.

这发生在Chrome上但不是FireFox。

My theory is that Chrome's CSS lays out the elements first then checks if min-height requirement is met. If not, then it extends the height of the div, pushing the "unexplained space" along with it. It essential copied, or inherited, the bottom margin of the child element. I think this only happens to the bottom margin though.

我的理论是Chrome的CSS首先列出元素然后检查是否满足最小高度要求。如果没有，那么它会扩展div的高度，随之推动“无法解释的空间”。它必须复制或继承子元素的下边距。我认为这只发生在底部边缘。

I've tried two tests of this theory, adding padding: 1px; and adding overflow: hidden; they both cause the height of the div to include it's child and thus gets rid of the issue. Although, I think in the case of overflow: hidden it's more cutting off the overflown content.

我已经尝试过两次这个理论的测试，添加填充：1px;并添加overflow：hidden;它们都会导致div的高度包含它的孩子，从而摆脱了这个问题。虽然，我认为在溢出的情况下：隐藏它更多地切断溢出的内容。

But I'm no CSS expert, all this is just speculation on my part, which is why I wanted to pose this as a question :)

但我不是CSS专家，所有这些只是我的猜测，这就是为什么我想把它作为一个问题:)

Here's the code

这是代码

#outer {
  background-color: blue;
  min-height: 100px;
}
#inner {
  background-color: red;
  height: 50px;
  margin-bottom: 50px;
}
#bottom {
  background-color: green;
  height: 50px;
}

<div id="outer">
  <div id="inner">
  </div>
</div>
<div id="bottom">
</div>

1 个解决方案

#1

This occurs due to margin collapsing - specifically the margin-bottom of inner collapses to become the margin-bottom of the outer element.

这是由于边缘坍塌造成的 - 特别是内部坍塌的边缘底部成为外部元素的边缘底部。

Solution:

解：

Give a border to the outer element to prevent the margin collapsing - see demo below:

为外部元素添加边框以防止边距折叠 - 请参阅下面的演示：

#outer {
  background-color: blue;
  min-height: 100px;
  border: 1px solid blue;
}
#inner {
  background-color: red;
  height: 50px;
  margin-bottom: 50px;
}
#bottom {
  background-color: green;
  height: 50px;
}

<div id="outer">
  <div id="inner">
  </div>
</div>
<div id="bottom">
</div>

#1