版权声明：chen_zan_yu https://blog.csdn.net/chen_zan_yu_/article/details/89405477
<!DOCTYPE html>
<html>
<head>
<meta charset=ut"utf-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border:10px solid red;
/*
* 外边距指的是当前盒子与其他盒子之间的距离
* 它不会影响可见框的大小，而是影响到盒子的位置
* 盒子有四个方向的外边框
* margin-top
* margin-bottom
* margin-left
* margin-right
*
* 由于页面中的元素都是靠左靠上摆放的
* 所以注意当我们设置上和左外边框时，会导致自身的位置发生变化
* 而如果设置右和下外边框则会改变其他盒子的位置
*
* 外边距可以指定负值
* 如果外边距设置的是负值，则元素向反方向移动
*
*/
/*
* 上外边距
*/
margin-top: 100px;
/*
* 左外边距
*/
margin-left: 100px;
/*
* 下外边距
*/
margin-bottom: 100px;
/*
* 右外边距
*/
margin-right: 100p;
/*
* margin还可以设置为auto，auto一般只设置给水平方向的margin
* 如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
*
* 垂直方向外边距如果为auto，则外边距默认就是0
*
* 如果将left和right同时设置为auto，则会将两则的外边距设置为相同的值
* 就可以使元素自动在父元素中居中，所以我们经常将外边距设置为auto
* margin-left:auto;
*/
/*
* 外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距
* 规则和padding一样
* margin:10px 20px 30px 40px;
*
* margin:0 auto;便是上下0，左右居中
*/
}
.box2{
width: 200px;
height: 200px;
background-color:royalblue ;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>