设置margin-top值无效以及margin值叠压的问题

最近在温习css基础的一些东西，看到设置margin值的时候出现的一些bug，闲话不多说，情景如下：
html结构代码:

<div class="margin-wrap">
    <div class="margin-top"></div>
    <div class="margin-bottom"></div>
</div>

css代码：

  .margin-wrap{
            width:800px;
            height:600px;
            margin:0 auto;
            background-color:#000000;
        }
        .margin-top{
            width:400px;
            height:300px;
            background-color:#2C97F6;
            margin:40px;
        }
        .margin-bottom{
            width:400px;
            height:100px;
            background-color:#4682B4;
            margin:40px
        }

效果如下:

image.png

大家很容易发现,我本意是想让父div的两个子div分别有40px的外边距,结果margin-top的div margin-top值无效，紧贴父div，两个div之间的上下margin也只有40px而不是80px（我给两个子div都设置了margin：40px）

解决方法：
1.针对类名margin-top的margin-top值无效的问题，需要给父div加一个border
2.针对margin值叠压，可以给任意一个子div的一侧方向值设置为80px，浏览器会选择最大的margin展示页面

修正后的效果：

image.png

修改后的css：

.margin-wrap{
            width:800px;
            height:600px;
            margin:0 auto;
            border:1px solid #ccc;
            background-color:#000000;
        }
        .margin-top{
            width:400px;
            height:300px;
            background-color:#2C97F6;
            margin:40px 40px 80px 40px;
        }
        .margin-bottom{
            width:400px;
            height:100px;
            background-color:#4682B4;
            margin:40px
        }