css - divにmargin bottomを追加する

Question

div (div.bar) に margin-bottom を追加しようとしていますが、親 div を壊しています

このフィドルでは、私が言っていることを確認できます。

ただし、foo divに1pxの境界線を追加すると

.foo {
    background-color:#FFF;
    border: 1px solid;
    margin: 10px;
}

期待どおりに動作します。

1px の境界線なしで動作させることは可能ですか?

score 2 · Accepted Answer

親に {overflow: hidden} または {overflow: auto} を設定します。

.foo {
    overflow: auto
}

score 0 · Accepted Answer

これはマージンの崩壊 ( http://reference.sitepoint.com/css/collapsingmargins ) の場合です。これを修正するにはいくつかの方法があります。その 1 つは、要素内でパディングを使用することです。例を挙げて、.bar http://jsfiddle.net/davidpett/g2CzH/のマージン下部の代わりに、.foo で padding-bottom を使用します。

.foo {
    background-color:#FFF;
    margin: 10px;
    padding-bottom: 50px;
}

.bar {
    height:100px;
    background-color:#333;
}

2 に答える 2