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プロパティが次の画像のように奇妙に動作することです。

珍しいマージン写真1

aux1にoverflow：hiddenを配置すると、結果は正常になる傾向があります。

珍しいマージン写真2

マージン（特にマージントップ）が正常に機能するためにoverflow：hiddenを使用する必要があるのはなぜですか？

4

1 に答える 1

2

答えは、この質問のようにマージンが崩壊することです。なぜこのCSSマージントップスタイルが機能しないのですか？

別の質問の参照：CSSがマージンを折りたたむポイントは何ですか？

于 2012-09-09T10:12:11.230 に答える