フリーロールされていない要素で動作しないマージントップ

Question

浮動小数点modal_big_hlineと非浮動小数点modal_big_button_container（clear: both）を含む親div #modal_shareがあります。

modal_big_button_containerのCSSは、親divの幅を左右の25pxから差し引くために作成されています。

問題：そのマージンがChromeの開発ツールを使用して変更することが分かるが、modal_big_button_containerのmargin-topを変更すると、それはアップ/ダウンシフトすることはありません、代わりにそれは、同じ位置のままです。

なぜこれが起こっているのですか？これをどのように解決できますか？ありがとう！

CSS

#modal_share { 
    width: 565px; 
    height: 400px; 
    position: relative; 
    background: whiteSmoke; 
    padding-top: 10px;  
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-box-shadow: 0px 3px 16px #222; 
    -moz-box-shadow: 0px 3px 16px #222; 
    box-shadow: 0px 3px 16px #222; 
    display: none; 
} 

.modal_big_hline { 
    width: 100%; 
    height: 1px; 
    margin-top: 25px; 
    border-top: 1px solid #CCC; 
    float: left; 
} 

#modal_big_button_container { 
    height: 14px; 
    width: auto; 
    margin: 10px 25px 0px 25px; 
    clear: both; 
} 

HTML構造

<div id="#modal_share"> 
    <div class="modal_big_hline"></div> 
    <div id="modal_big_button_container"></div> 
</div> 

JSFiddle：http://jsfiddle.net/5LG2w/

Answer 1

01を試してみてください

ここはフィドルです。http://jsfiddle.net/5LG2w/2/です。

か、フロートを.modal_big_hlineから取り出すことができます。あなたのマージントップが動作します - http://jsfiddle.net/5LG2w/3/。

#modal_big_button_container { 
    height: 14px; 
    width: auto; 
    margin: 10px 25px 0px 25px; 
    clear: both; 
    background: red; 
} 

Answer 2

マージンが崩壊するようです。これらのページをチェックしてください：

http://reference.sitepoint.com/css/collapsingmargins

http://www.howtocreate.co.uk/tutorials/css/margincollapsing