Question

情况是：

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中，结果趋于正常：

unusual margin photo 2

为什么我甚至需要使用overflow：隐藏边距（特别是margin-top）才能正常工作？

Answer 1

答案是，保证金崩溃，如此问题：Why does this CSS margin-top style not work?

另一个问题参考：What is the point of CSS collapsing margins?

边缘css属性的特殊行为

1 个答案: