盒子边距的特性-526互联

兄弟关系

两个盒子垂直外边距

 1 <style>
 2         /*
 3         1.兄弟关系，两个盒子垂直外边距和水平外边距
                    垂直外边距以最大的外边距为主，水平外边距并处理
 4         2.父子关系，给子加外边距，但作用于父身上，怎末解决？
 5         */
 6         .box1,.box2{
 7             width: 100px;
 8             height: 100px;
 9         }

10         .box1{
11             background-color: blue;
12             margin-bottom: 100px;
13         }
14         .box2{
15             background-color: aquamarine;
16             margin-top: 50px;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="box1"></div>
22     <div class="box2"></div>
23 
24 </body>

    <style>
        /*
        1.兄弟关系，两个盒子垂直外边距和水平外边距
        2.父子关系，给子加外边距，但作用于父身上，怎末解决？
        */
        .box1,.box2,.box3,.box4{
            width: 100px;
            height: 100px;
        }
        .box5{
            width:200px;
            height: 200px;
        }
        .box6{
            width:100px;
            height:100px;
        }
        .box1{
            background-color: blue;
            margin-bottom: 100px;
        }
        .box2{
            background-color: aquamarine;
            margin-top: 50px;
        }
        .box3{
            background-color: aqua;
             float: left;
             margin-right: 100px;
        }
        .box4{
            float: left;
            background-color: chartreuse;
            margin-left: 100px;
        }
        .box5{
            float: left;
            background-color: coral;
            /* padding-top: 100px; */
            /* border: 1px solid green; */
            overflow: hidden;
        }
        .box6{
            float: left;
            background-color: crimson;
            margin-top: 100px;
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5">
        <div class="box6"></div>
    </div>
   
</body>