css設定時に親要素が子要素margin値に従って移動

親要素の箱にはサブ要素の箱が含まれています.サブ要素の箱には垂直外側のmargin-topがあり、親要素の箱もmargin-topの値を下に移動しますが、サブ要素と親要素の余白は変わりません.
HTML,CSS:

<div class="box1">
    <div class="box2">
        <div class="content">
            <div class="margin">123</div>
        </div>
    </div>
</div>

*{padding:0; margin:0;}
.box1{ width:600px; height:1042px; margin:0 auto; background:#ccc; overflow:hidden;}
.box2{ width:600px; height:1042px; background:#000; overflow:hidden;}
.content{ width:600px; height:1042px;  overflow:hidden;}
.margin{ width:400px; height:30px; line-height:30px; text-align:center; margin:20px; background:#f00;  overflow:hidden;}

解決方法:
1、親要素の高さを変更し、padding-topスタイルシミュレーション(padding-top:1 px;常用)2、親要素にoverflow:hiddenを追加する.スタイル(完全)3、親要素または子要素のフローティング(float:left;使用可能)4、親要素のborder(border:1 px solid transparent使用可能)5、親要素または子要素の絶対位置を宣言