外边距：margin
margin属性设置外边框，即控制盒子和盒子之间的距离。
举例：
<head> <style> div{ width:200px; height:200px; background-color: aqua; } .one{ margin-bottom: 20px; margin-left: 20px; margin-top: 20px; margin-right:20px; } </style> </head> <body> <div class="one">1</div> <div>2</div> </body>
显示如下：
同样的margin也可以有简写方式，方法和padding相同，这里就不进行赘述了。
实现让块级盒子水平居中：
我们可通过设置外边距让块级盒子水平居中，但是必须满足两个条件：
1：盒子必须指定宽度(width) 2:盒子左右的外边距都设置为auto
常见的写法有以下三种：
第一种：最推荐！！！
margin: 0 auto;//上下外边距为0，左右auto
第二种：
margin: auto;//上下左右均为auto
第三种：
margin-left: auto; margin-right: auto;
举例：
将该盒子设置为举例页面上下100px,左右居中对齐
<head> <style> div{ width:300px; margin: 100px auto; background-color: aquamarine; } </style> </head> <body> <div class="one">1</div> </body>
显示如下：
注：上述方法是实现让块级元素水平居中，行内元素或者行内块元素如果想实现水平居中，那么只需要给它的父元素添加" text-align:"center" "即可
举例：
<head> <style> div{ width:300px; margin: 100px auto; background-color: aquamarine; } span{ width: 100px; background-color:blue; } </style> </head> <body> <div class="one">div <span> span </span> </div> </body>
显示如下：
行内元素和行内块元素并未水平居中显示！
给父级元素添加text-align:“center”：
div{ width:300px; margin: 100px auto; background-color: aquamarine; text-align: center; }
显示如下：
外边距合并：
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并：
当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中较大者这种现象被称为相邻块元素垂直外边距的合并。
杜绝这种现象的方法即为：尽量只给一个盒子添加margin值
举例：
准备两个颜色大小均不相同的盒子：
<head> <style> body { margin: 0; } .box1 { width: 200px; height: 200px; background-color:aqua; } .box2 { width: 100px; height: 100px; background-color:blueviolet; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
两个盒子均为设置外边距的值，显示效果如下：
上下盒子都设置外边距，且下盒子的外边距值大于上盒子的，显示如下：
最终两盒子的距离为两者中的外边距较大值!
上盒子设有外边距，而下盒子未设置外边距：
嵌套块元素垂直外边距的塌陷：
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
举例：
准备两个具有嵌套关系的盒子：
<!DOCTYPE html> <html lang="en"> <head> <style> body { margin: 0; } .box1{ width: 300px; height: 300px; background-color:aqua; } .span1 { width: 100px; height: 100px; background-color:blueviolet; } </style> </head> <body> <div class="box1"><div class="span1"></div></div> </body> </html>
父盒子和子盒子都未设置边距，显示如下：
我们可以看到这两个盒子都与网页的顶部紧紧相连。
将父盒子的margin-top设置为：30px,此时父盒子带着它的子盒子整体相对于页面向下移动了30px，显示效果如下：
但此时子盒子的上部还是紧贴父盒子
尝试通过设置子盒子的margin-top且设置子盒子的margin-top大于父盒子的margin-top，显示效果如下：
子盒子并未向下移动，而是父盒子和子盒子一起向下移动了些许距离，而这个距离即为父盒子和子盒子中margin-top中的较大值。
而这就被称为嵌套块元素垂直外边距的塌陷。
实现“”父子分离”：
为了解决上面这种“塌陷”的现象，有以下三种解决方案：
1：为父元素定义上边框：
注意：为了美观，这里我们将边框设置为transparent
.box1{ width: 300px; height: 300px; border-top: 40px transparent solid; background-color:aqua; }
显示如下：
2：为父元素定义上内边距：
.box1{ width: 300px; height: 300px; padding-top: 20px; background-color:aqua; }
显示如下：
3：为父元素添加overflow：hidden
.box1{ width: 300px; height: 300px; overflow: hidden; background-color:aqua; } .span1 { width: 100px; height: 100px; margin-top: 20px; background-color:blueviolet; }
显示如下：
小tips：虽然以上三种方法都能够解决“塌陷问题”，但是我们还是最推荐最后一种，因为前两种方法都会改变块级元素的大小，不建议使用，而最后一种方法并没有改变，因此是最推荐，也是最常用的。
清除内外边距：
网页元素有很多都带有默认的内外边距，而且不同的浏览器默认的值也不相同。
举例：
因此在进行网页布局之前，我们首先要清除网页元素的内外边距，语法：
*表示选择页面中的所有网页元素
<style> *{ padding: 0; margin: 0; } </style>
显示如下：
行内元素为了顾忌兼容性，尽量只设置左右外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以进行设置了。
