【CSS-01】CSS中Margin布局

margin在复制时，如果参数个数不同，margin的效果也有不同意义。
基本原则是，从上往下，从中间到两边，顺时针。

• 如果margin后面只跟一个参数，表示上、右、下、左值都为该值。
• 如果margin后面跟两个参数，表示上下值参数1，左右参数2。
• 如果margin后面跟三个参数，表示上参数1、左右参数2，下参数3。
• 如果margin后面跟四个参数，表示上、右、下、左对应参数一二三四。

---

html文件：

  <div class="margin-eg">
        <div class="margin-inner">
            这是盒子内部
        </div>
 </div>

例1：

css文件：

.margin-eg{
    background-color: beige;
    border: 5px solid salmon;
}
.margin-inner{
    background-color: aquamarine;
    border: 5px solid yellowgreen;
    margin: 20px;
}

效果：

---

例子2：
如果margin后面带了两个参数：10px 20px,表示垂直方向（上、下）的间距是10px,水平方向的间距是20px；
css:

.margin-eg{
    background-color: beige;
    border: 5px solid salmon;
}
.margin-inner{
    background-color: aquamarine;
    border: 5px solid yellowgreen;
    margin: 20px 40px ;
}

效果：

---

例3：
margin-inner的类中，margin带了3个参数，表示上间距20px,左右40px,下60px.

css:
.margin-eg{
    background-color: beige;
    border: 5px solid salmon;
}
.margin-inner{
    background-color: aquamarine;
    border: 5px solid yellowgreen;
    margin: 20px 40px 60px;
}

效果：

---

例子4：
上20px，右40px，下60px，左80px。
css:

.margin-eg{
    background-color: beige;
    border: 5px solid salmon;
}
.margin-inner{
    background-color: aquamarine;
    border: 5px solid yellowgreen;
    margin: 20px 40px 60px 80px;
}

效果：