CSS最小高度添加到子元素的底部边距

Question

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

我缩小了范围，我想我知道为什么会发生这个问题。但我想知道，为什么发生这种情况。

的问题，我认为，是min-height: 50px在#outer选择增加了的#inner下面#outer下边距，这导致上述的原因不明的空间。如果将其替换为height: 50px，则该空间将消失。

这发生在Chrome上，但不是FireFox。

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

我试过这个理论的两个测试，加入padding: 1px;和加入overflow: hidden;它们都导致div的高度包括它的孩子，从而摆脱了问题。虽然，我认为在overflow: hidden的情况下，它更多地切断了飞越的内容。

但我没有CSS的专家，这一切都只是我的一部分，这就是为什么我想提出这个的问题:)

这里猜测是代码

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

Answer 1

此发生是由于margin collapsing - 特异性的inner的margin-bottom塌陷成为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>