在上一篇中简单介绍了内边距（padding），今天要说的是元素的外边距（margin）
元素想要和其他元素有间距的话可以使用padding，但是padding会改变元素的大小。我们也可以使用margin来增加间距。我们把人体比作元素，那么margin就是我们的气场。
margin与padding相同，分为4个方向，分别为：
margin-top：上边距
margin-right：右边距
margin-bottom：下边距
margin-left：左边距
示例如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*上边距*/
margin-top: 10px;
margin-left: 20px ;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下所示：
margin的值也可以是负数，如下所示：
当同级元素在垂直方向使用了margin时，情况会有一些变化，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
/*下边距*/
margin-bottom: 20px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*上边距*/
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下：
可以看出，当同时定义了margin-top和margin-bottom时在同为正数时仅采用大的数值。
继续来看负数的情况：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
/*下边距*/
margin-bottom: -80px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*上边距*/
margin-top: -10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下所示：
从具体的效果可以看出，在均为负数时，取的事绝对值大的进行处理。
如果为一正一负呢？请看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
/*下边距*/
margin-bottom: 11px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*上边距*/
margin-top: -10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下所示：
可以看出，当为一正一负时，是由数字相加后的结果进行处理。
margin还可以用来处理元素居中问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*设置垂直方面是20px间距，水平方向是auto(自动居中)*/
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下图所示：
设置了水平方向为auto，则元素就会自动居中显示。
当元素为父子关系时，子元素在设置了垂直方向的margin时会将此margin自动传递给父级，由父级展示出相应的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: blue;
/*子元素定义了margin-top*/
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
效果如下图所示：
从上图可以看出，子元素box2的上边距直接传递到了父级box1，则变成了box1的上边距。
如果我们确实是要box2距离box1上边10px，那么就要使用padding来进行处理。
外边距margin的介绍到此结束。
只要你够勤奋，胜利就在你面前！