1.任务目标
要理解外边距，先来说一下外边。
物体的外边，指的就是外围的边界，对网页元素来说，外边就是元素最外面的边界。
那么外边距，就是一个物体的外边，与另一个物体的外边的距离。
CSS之中，通过margin来设定元素的外边距，本篇就来说明下用法。
2.无外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="btn01">
<input type="button" value="按钮1">
</div>
<div class="btn02">
<input type="button" value="按钮2">
</div>
</body>
</html>
效果如下
我们可以看到这两个按钮很丑，想让他们分开一点
3.有外边距
可以通过margin-left/margin-right/margin-top/margin-bottom分别设定元素的左、右、上、下边距。
我们第二按钮向下外边距10个像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn02{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="btn01">
<input type="button" value="按钮1">
</div>
<div class="btn02">
<input type="button" value="按钮2">
</div>
</body>
</html>
效果如下
4.小结
我们本小结学习了外边距，我们要学会使用外边距并熟练掌握。