demo38-盒子外边距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                background: red;
                /*
                 div1距离下边5个px
                 margin-bottom
                 外边距一般用在兄弟关系(即双方是平级关系,不存在包含关系),设置兄弟和兄弟之间的距离
                 * */
                /*margin-bottom:5px ;*/
            }
            .div2{
                width: 300px;
                height: 300px;
                background: blue;
                margin-top: 20px;
                margin-left: 20px;
                margin-right: 20px;
            }
        </style>
    </head>
    <!--
        外边距
    -->
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
</html>
演示效果: