レイアウト時にmarginが親要素に影響する

レイアウト時にmarginが親要素に影響します.md
レイアウトでmarginを使用する場合

<div class=”login-bg”>
        <div class=”login”>
        12345
        </div>
</div>

<style>
.login-bg{
    background-color:red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background: url(imac.png) no-repeat;
    background-size:400px 400px;
}
.login{
    background-color: #999;
    width: 300px;
    height: 200px;
    margin-top: 100px;
}
</style>

このとき、2つのdivはいずれも100 px上にシフトした.
私たちが望んでいる.loginオフセット100 pxではありません.
解決方法
login-bg Divにpadding/borderを付けるか、login-bg Div/Inner Divにfloat/position:absoluteに設定する(CSS 2.1フローティング要素と絶対位置決め要素はMargin折りたたみに関与しないことを規定する)