本章目录
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.小结
我们本小结学习了外边距，我们要学会使用外边距并熟练掌握。
