老师，为什么我这里相邻的两元素外边距不会重叠呢？

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .container {
        width: 900px;
        height: 600px;
        background-color: white;
        margin: 0 auto;
    }

    .top {
        width: 900px;
        height: 350px;
        background: #63B8FF;
    }

    .img1 {
        width: 360px;
        height: 214px;
        background: url(http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg) no-repeat;
        margin: 68px 60px;
    }

    .img2 {
        width: 360px;
        height: 214px;
        background: url(http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg) no-repeat;
        margin: 68px 60px;
    }

    .top div {
        display: inline-block;
    }

    .bottom {
        width: 900px;
        height: 250px;
        background: #CD919E;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="top">
            <div class="img1">
            </div>
            <div class="img2"></div>
        </div>
        <div class="bottom">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>
</body>

</html>

拍拍你的头 2019-06-12

源自：CSS网页布局基础 2-14 编程练习