Question

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

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

我认为，问题是min-height: 50px选择器中的#outer会将#inner的下边距添加到#outer以下，从而导致上述无法解释的空间。如果要用height: 50px替换它，空间就会消失。

这种情况发生在Chrome上，但不适用于FireFox。

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

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

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

这是代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是由margin collapsing引起的 - 特别是margin-bottom 的inner折叠成为margin-bottom元素的outer

<强>解决方案：

向border元素提供outer以防止边距折叠 - 请参阅下面的演示：

#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>

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

1 个答案: