Html margin-css属性的特殊行为_Html_Css_Margin

Html margin-css属性的特殊行为

html css

Html margin-css属性的特殊行为,html,css,margin,Html,Css,Margin,情况是： CSS： <style> #aux1{ position:relative; background-color:#ccc; width:100%; height:200px; } #aux2{ display:block; background-color:#F00; width:100px; height:100px; margin:20px; } </style> #a

情况是：

CSS：

<style>
#aux1{
    position:relative;      
    background-color:#ccc;
    width:100%;
    height:200px;
}
#aux2{
    display:block;
    background-color:#F00;
    width:100px;
    height:100px;
    margin:20px;
}

</style>


#aux1{
位置：相对位置；
背景色：#ccc；
宽度：100%；
高度：200px；
}
#aux2{
显示：块；
背景色：#F00；
宽度：100px；
高度：100px；
利润率：20px；
}

HTML：

<html><head></head>
<body>
    "...some content (div with height: auto)"
    <div id="aux1">
        <div id="aux2">
        </div>
    </div>
</body>
</html>


“…某些内容（带高度的div:auto）”

问题在于aux2的margin属性行为奇怪，如下图所示：

如果我将溢出：隐藏在aux1中，结果趋于正常：

为什么我甚至需要使用overflow:hidden来让边距（尤其是边距顶部）正常工作？

答案是，边距塌陷，如本问题所示：

另一个问题参考：

它是。。。你是对的。虽然我的问题是关于崩溃的具体案例，但父子div案例重复的问题也涉及父子div保证金崩溃问题。