捉摸不定的外边距 7.5

会涉及到外边距，必然盒子与盒子之间的作用

那么盒子与盒子之前设置外边距margin属性 会有3种情况产生

同级塌陷（只有上下会塌陷，左右叠加）

如果BOX1的下外边距和BOX2的上外边距margin同时设置一个值，那么小的那个值会塌陷到大的那个值里面，不显示了！

 

实例

/* .box1 添加下外边距 */
.box1 {
    margin-bottom: 30px;
}

/* .box2 添加上外边距 */
.box2 {
    margin-top: 30px;

那么box1和box2之间的外边距只有30px因为同级塌陷了！

 嵌套传递（尽量不要用该方式）

如果box4为box3的子盒子，如果box3没有添加margin属性，但是box4添加了margin属性 那么box4的margin属性会传递到box3父盒子身上

实例

.box3{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
}
.box4{
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 50px;
}

 那么box3也会有个margin-top: 50px;属性

自动挤压

一个盒子如果给它赋值 margin-left:  auto;那么它会默认margin-left最大  那么又同时给它赋值一个margin-right: auto;的话 margin-right又会最大，这个时候两边会同时挤压，盒子会自动放在中间

实例

.box5 {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-left: auto;
}

如果是  margin-left: 50px auto;那么指的是上下50px；左右auto!