logo标签列表

margin css属性的奇怪行为

htmlcssmargin
3
情况如下：
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>

HTML：

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

问题在于aux2中的margin属性表现出奇怪的效果，如下图所示：

unusual margin photo 1

如果我在aux1中加入overflow:hidden，则结果趋于正常：

unusual margin photo 2

为什么我需要使用overflow:hidden才能使margin（特别是margin-top）正常工作呢？请帮我解答。
你说得对。虽然我的问题是关于特定情况下的折叠，即父子 div 案例。 - andreihondrari
重复的问题也涉及到父子div边距折叠问题。 - BoltClock
1个回答
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接