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