0

次のような単純な HTML と CSS があります。.outside box と .inside box の間で下部マージンが崩れていることに気付きました。下のマージンが折りたたまれているときに背景画像が表示されない理由がわかりません。背景画像はマージンについて何もすべきではありません。ありがとう ：）

<div class="outside"> 
<div class="inside"> content </div>
</div>


.outside {background:url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat;    padding-top:1px;}

.inside { background:#00CCFF; margin:0 0 10px 0; padding:0 0 20px 0;}
4

1 に答える 1

0

ネストされた div 間の垂直マージンの崩壊を実験しています

    .outside {
       background:#ff0000 url(http://blurfun.com/temp/images/bottom.png) left bottom        no-repeat;    
padding-top:1px;
        overflow:hidden;
    }

赤い色は、結果をテストするためだけに追加されました。もちろん拭くことができます。

詳細コメント

外側の div は、左下に一種の黄色の帯を使用しています。

内側の div には 10 ピクセルの下マージンがあり、このマージンと外側の div の下マージンの間には何もありません。それが彼らが崩壊している理由です。

下のパディングや外側のdivへの下の境界線を含めて、これを防ぐことができます。しかし、これはあなたの設計意図を変えるでしょう。

そのため、垂直マージンの崩壊を防ぎ、デザインを妨げないオーバーフロー プロパティの使用を提案しました。

このフィドルでは、内側の div に左マージンを追加し、外側の div に赤い背景を追加しました。

教訓的なネズミイルカのために、内側の div に透明な背景も含めました。

垂直マージンの崩壊

垂直マージンの崩壊

オーバーフローによる防止:hidden

オーバーフローによる防止:hidden

それで遊びます。オーバーフロー プロパティを削除し、垂直マージンが崩れるのを確認します。あなたにとって十分に明確であることを願っています。

良い一日を過ごし、コーディングを楽しんでください :-)

于 2013-02-21T02:22:44.613 に答える