盒子外边框

实例

/*同级塌陷*/
.box{
	width:100px;
	height:100px;
	background-color:lightblue;
	margin-bottom: 40px;
}
.box1{
	width:100px;
	height:100px;
	background-color:lightcoral;
    margin-top:40px;
}

实例

/*嵌套传递,*/
.box{
	width:300px;
	height:300px;
	background-color:lightblue;
	
}
.box1{
	width:100px;
	height:100px;
	background-color:lightcoral;
    
}
.box{
   padding-top:100px;
   height: 200px;
}

体会：margin和padding在两个盒子中使用区别，margin用于两个并列的盒子间的调节，padding用于嵌套在一起的盒子间的调节

实例

/*自动挤压*/
 .box{
	width:100px;
	height:100px;
	background-color:lightblue;
	margin-left:100px;
	margin-left:-50px;
/* 	margin-left: auto;
margin-right:auto; */
	margin:0 auto;

}