コンテンツがないdivが子要素の影響を受ける理由

Question

compass（s​​assフレームワーク）でcss3アニメーションを試してみました。 コンテンツがないdivが影響を受けることがあります。 次は

<div class="box"> 
    <div class="ball"></div> 
    <div class="ball"></div> 
</div> 

サス

@import "compass/css3" 

.box 
    width: 600px 
    height: 600px 
    background-color: pink 
    .ball 
     width: 40px 
     height: 40px 
     +border-radius(100%) 
     background-color: black 
     margin-top: 50px // How to just margin top the ball div 

結果はこのように見ている

HTML私のサンプルコードです。 div.boxはball.divのマージン200pxをたどっていましたが、ページ上部に表示します。

しかし、私はdiv.boxにいくつかのコンテンツを追加したとき、結果は良好に動作するが、いくつかの余分なコンテンツです。

<div class="box">0 
    <div class="ball"></div> 
    <div class="ball"></div> 
</div> 

私は不思議なぜコンテンツのないdiv要素を子要素に影響されなかったし、それに対処する方法。

Answer 1

@ CBroeのコメントによると、
これは問題の電話Collapsing marginsです。

問題が発生したとき：

1. は、内側および外側の要素がブロックの両方として表示されています。
2. は属性は、外側の要素に設定されて何のボーダー、パディング、およびオーバーフローはありません。
3. 外部要素の最初/最後の子の位置がfloatまたはabsoluteとして設定されておらず、残りの内容が空白です。

最初と最後の子の境界線がその親にマージされます。

次のコードは、問題あなたが求めているもの

.box 
    overflow: auto // Set overflow attribute to outer element 
    height: 600px 
    background-color: pink 
    .ball 
     width: 40px 
     height: 40px 
     +border-radius(100%) 
     background-color: black 
     margin-top: 50px